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

Font Fit 在你的網站上測試各種字型排版,即時預覽字體大小顏色樣式
(Copyright: baks / 123RF Stock Photo

設計網頁時排版和色彩選擇非常重要,其中色彩可以參考「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 工具列來切換字型大小、樣式和顏色等設定。

Font Fit

STEP 2

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

Font Fit

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

Font Fit

STEP 3

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

Font Fit

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

Font Fit

STEP 4

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

Font Fit

分享本文