Type Hero 在瀏覽器即時測試 Google Fonts 效果,可切換字型和背景顏色

Type Hero 在瀏覽器即時測試 Google Fonts 效果,可切換字型和背景顏色

Google Fonts 可能是目前收錄最多免費英文字型的網站,去年大改版後,原本動線不佳和瀏覽不便等情形已經獲得改善,走向更簡約的設計風格,整體瀏覽感覺是很棒的!假如你不喜歡它的字型搜尋或測試功能,也有開發者自行開發第三方應用,例如 FontCDN 更好用的網頁字型搜尋工具,能直接在網頁快速套用 Google 字型的 Font Swap 外掛程式或是 Better Font Finder 更直覺的字型檢視器,都是這網站之外值得一試的免費服務。

本文要再來推薦一款線上工具「Type Hero」,可在瀏覽器裡快速、即時測試 Google Fonts 字型顯示效果,只要將內文貼上,就能直接在瀏覽器內切換字重(Font Weight)、風格和字型大小,調整不一樣的文字和背景顏色並即時顯示於網頁上。

雖然 Google Fonts 網站本身就已經有這些功能,但似乎不夠直覺好用,而且無法變換文字和背景色來查看更接近真實的顯示效果,如果你想測試某些 Google Fonts 字型在特定內容、大小、顏色的顯示效果,Type Hero 是能達成需求的線上工具。可惜收錄字型好像不夠完整,有部分無法找到。

網站名稱:Type Hero
網站鏈結:https://typehero.now.sh/

使用教學

STEP 1

開啟 Type Hero 網站後,在右邊測試框輸入要套用字型效果的內容,Google Fonts 目前提供的網頁字型以英文字型為主,如果輸入中文字是不會有變化的(雖然 Google Fonts 也有思源黑體,但還在 Early Access 階段,我在這篇教學有提到如何使用)。

Type Hero

STEP 2

接著從左上角的「TEXT」輸入字型名稱來搜尋、選擇 Google Fonts 字型。

Type Hero

當你選擇字型後,應該就能在 Type Hero 右側也就是你剛才輸入內容的地方看到效果,緊接著可以從下方來設定字重(Font Weight),每個字型提供的字重都不一樣,大部分可能都只有一兩種,數字越小的越細,相對來說數字越大的也會越粗。

右側的數值則是用來調整文字大小。

Type Hero

STEP 3

最後,從 Background 變換背景顏色(上方則是文字顏色),就能看到某個字型、內容在特定顏色下呈現出來的效果囉!因為是直接載入 Google Fonts 網頁字型,不用另外下載檔案或安裝字型,若測試效果符合你的期待,就能回到 Google Fonts 來下載或取得 Webfont 程式碼。

Type Hero

值得一試的三個理由:

  1. 直接在瀏覽器內預覽 Google Fonts 各種英文字型效果
  2. 可切換不同字重、字型大小和顏色
  3. 相較於 Google Fonts 內建功能,Type Hero 操作上更簡單
分享本文
Pseric
Pseric

學生時代成立網站以來堅持每日更新,在挖掘資料的過程中慢慢找出自己經營網站的方法,最開心的是有一群一起長大的讀者。

文章: 6251