Font Fit 在你的網站上測試各種字型排版，即時預覽字體大小顏色樣式

設計網頁時排版和色彩選擇非常重要，其中色彩可以參考「BrandColors」從世界知名品牌標準色來獲得靈感，或是一些我曾經介紹過的配色工具；排版的話考量到字型和字體大小、間距、行高等等，這也是我平時不斷調整及測試的部分。對內容網站來說，提供閱聽者良好閱讀體驗不僅是考驗也是需要努力的目標，試著以讀者角度想，當你在閱讀網站時，會想要得到什麼樣的感覺，這麼說好像有點抽象，你可以利用 Font Fit 來找出最合適的排版設計。

Font Fit 是一個免費網站測試工具，能夠快速調整網頁各部分的字型、大小、顏色及樣式，即時更新顯示於頁面中，無須額外下載或安裝軟體。修改後能將修改結果匯出產生分享鏈結，也會產生程式碼告訴你如何將字型樣式套用到你的網頁。

Font Fit 和 Fontface Ninja 工具有些類似，不過後者只能查詢網站字型、大小，在上方工具列內進行文字樣式測試，相較之下 Font Fit 即時修改網頁字型大小會更適合用於開發。如果你想快速修改網頁內容來進行測試，Edit Any Website 用一行程式碼就能搞定。

網站名稱：Font Fit
網站鏈結：https://www.fontfit.com/

使用教學

STEP 1

開啟 Font Fit 後，直接從左上角輸入要測試的網址，點選「OPEN」後網頁會顯示於下方，我們就能開始利用 Font Fit 工具列來切換字型大小、樣式和顏色等設定。

STEP 2

將滑鼠游標移動到下方網頁的任何元件會出現藍色框框，點選後就能開始修改。如果你在選取後調整沒有效果，那麼請從上方字型名稱左邊的欄位選擇正確標籤（例如 H1 標題）。

從 Font Fit 直接套用特定字型，即時預覽文字顯示效果，這些字型來自 Google Fonts，包含 Serif、Sans Serif、Display、Handwriting 和 Monospace，數量非常多且豐富。

STEP 3

除了切換字型和字體大小調整外，也能加入粗體、斜體或下底線樣式。

Font Fit 非常強大，連調整網頁上的文字顏色也能做到！

STEP 4

如果你在修改後，想要傳給其他人看看，點選右上角的「Share / Export」可以產生鏈結以及程式碼，想在網頁中套用字型設計，加入第二段 Google Fonts 字型鏈結後再把最下面的樣式表貼到自己網站的 CSS 檔就能使用。