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 階段，我在這篇教學有提到如何使用）。

STEP 2

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

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

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

STEP 3

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