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

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

Font Fit 和 Fontface Ninja 工具有些類似，不過后者只能查詢網站字型、大小，在上方工具欄內進行文字樣式測試，相較之下 Font Fit 實時修改網頁字號會更適合用于開發。

Fontfit

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 檔就能使用。

【優設酷站22連發！】

1. 免費圖庫+導航收集站：《酷站兩連發！高品質免費圖庫站+專注WEB/APP導航收集站》
2. 音樂站+字體搜索：《酷站兩連發！幫你專心工作的音樂站+谷歌字體在線搜索神器》
3. 漸變色+代碼比較：《酷站兩連發！漸變色方案全聚合網站+在線代碼比較神器》
4. 配色+占位圖：《酷站兩連發！在線色彩搭配工具+快速生成占位圖片器》
5. LOGO下載+字體下載：《酷站兩連發！可商用的矢量LOGO下載+平面最愛的27款免費字體》
6. 壓縮圖片+在線配色：《酷站兩連發！在線圖片壓縮神器+在線配色工具COLOURCO》
7. CSS Hover動畫+寵物小精靈配色：《酷站兩連發！寵物小精靈專屬配色網站+CSS HOVER動畫收集站》
8. 美女圖片+游戲配色：《酷站兩連發！游戲配色網站+免費美女素材特供網站》
9. 在線配色+字體推薦：《酷站兩連發！在線配色神器+英文字體推薦網站》
10. 追波作品變代碼+16進制顏色：《酷站兩連發！用代碼呈現DRIBBBLE作品+16進制顏色網站》
11. 無縫紋理+多邊形背景：《酷站兩連發！專注無縫紋理素材站+多邊形背景生成器》

原文地址：free.com.tw

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量130萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com