🔤 字型預覽工具

即時預覽 30+ 款 Google Fonts 字型，支援字型配對建議、收藏功能與 CSS 程式碼一鍵複製，設計師與工程師的字型選擇利器。

什麼是字型預覽工具？

字型預覽工具讓你即時預覽 30 種以上的 Google Fonts 字型，支援字型配對建議、收藏功能，以及 CSS 程式碼一鍵複製。挑字型時，把自己的文字套進不同字型實際看效果，比只看字型名稱可靠得多，是設計師與工程師選字型的好幫手。

你可以輸入自己的標題與內文，比較不同字型的呈現，找出最適合專案調性的搭配，並直接取得引用的 CSS 程式碼。

適用情境

如何使用

  1. 輸入你要預覽的標題與內文文字。
  2. 瀏覽 30+ 款字型的即時呈現。
  3. 收藏喜歡的字型，或查看配對建議。
  4. 一鍵複製該字型的 CSS 程式碼。

使用技巧

名詞解釋

Google Fonts
Google 提供的免費網頁字型服務，可透過 CSS 引用。
字型配對
搭配兩款以上字型（如標題＋內文）以兼顧個性與易讀。
襯線／無襯線
字型有無筆畫末端的裝飾，影響風格與適用場景。

常見問題 FAQ

這個工具支援哪些字型？

目前內建 30+ 款熱門 Google Fonts，涵蓋無襯線（Inter、Roboto 等）、襯線（Playfair Display、Lora 等）、等寬（JetBrains Mono 等）及展示字型。字型從 Google Fonts CDN 動態載入，無需安裝。

如何將選好的字型加入我的網站？

點選喜歡的字型後切換到「取得 CSS」頁籤，複製 @import 語法貼入你的 CSS 檔案，或複製 <link> 標籤貼入 HTML <head> 中即可使用。

什麼是字型配對？為什麼要使用不同的標題和內文字型？

字型配對是指為標題和內文選擇視覺上和諧的不同字型。通常標題使用對比強烈的展示或襯線字型，內文使用閱讀舒適的無襯線字型，可以提升版面的層次感和可讀性。

可以預覽中文字型嗎？

可以。工具中包含 Noto Sans TC、Noto Serif TC、Noto Sans SC 等支援繁體中文與簡體中文的 Google Fonts。輸入中文預覽文字即可看到對應效果。

可以用自己的文字預覽嗎？

可以。輸入你的標題與內文，工具會把它套進各款字型即時呈現，比用範例字更能判斷實際效果。

可以取得 CSS 嗎？

可以。選定字型後可一鍵複製引用的 CSS 程式碼，直接用在你的網站或專案中。

支援中文字型嗎？

部分 Google Fonts 支援中文，但許多僅支援英文。預覽時若中文無法正確顯示，代表該字型未涵蓋中文字。

資料會上傳嗎？

你輸入的預覽文字在本機處理；字型本身由 Google Fonts 載入。預覽內容不會被儲存。