網頁字型預覽工具
即時比較 Google Fonts 並自動產生 CSS
預覽設定
關於網頁字型預覽工具
網頁字型預覽工具是一個線上工具，讓您可以直接在瀏覽器中即時查看並比較 Google Fonts 等提供的各種字型。不依賴傳統系統字型而實作網頁字型，對於提升網站的品牌力與設計美感至關重要。
在本工具中，您可以微調字重、大小和行高，並並排比較實際文字的顯示效果。此外，它還會自動產生 CSS 程式碼和 HTML 標籤，讓您輕鬆將所選字型實作到網站中，大幅提升開發效率。
所有輸入的文字和設定都完全在您的瀏覽器中處理，絕不會傳送到伺服器，您可以安心使用。
使用方法
設定文字與樣式
首先，在畫面頂部的設定面板中輸入您想預覽的文字。接著，使用滑桿和按鈕調整字體大小、行高、字距、字重和背景顏色，建立一個接近您實際網站環境的狀態。
選擇並比較字型
您可以使用「比較數量」按鈕將比較欄位增加到最多 4 個。在每個欄位中選擇「繁體中文」或「英文無襯線體」等分類，從下拉選單選擇特定的字型名稱，該字型就會立即載入並反映在預覽中。
複製程式碼並實作
找到理想的字型後，查看底部的程式碼面板。從「CSS」、「<link> 標籤」和「@import」分頁中選擇符合您專案需求的載入方式，點擊複製按鈕以貼上程式碼，實作就完成了。
網頁字型名詞解釋
- 網頁字型 (Web Fonts)
- 一種可透過從伺服器或 CDN 下載字型資料，讓字型能在瀏覽器中顯示的技術，即使使用者的裝置上並未安裝該字型。最大的優勢在於能完全按照設計師的意圖重現美麗的排版。
- Google Fonts
- 由 Google 提供的完全免費、開源的網頁字型服務。它擁有豐富的字型庫，可免費使用於商業或非商業用途，並因透過 CDN 快速傳遞而被全球網站廣泛採用。
- font-family
- CSS 中用於指定文字字型的屬性。可指定多個字型名稱並以逗號分隔，會由左至右依優先順序套用，最佳實務是在最後指定針對不同環境的備用字型 (Fallback fonts)。
- FOUT / FOIT
- 網頁字型載入時發生的顯示問題。FOUT (Flash of Unstyled Text) 是指暫時顯示備用字型的現象，而 FOIT (Flash of Invisible Text) 則是文字暫時變得透明。建議使用
font-display: swap;來控制以發生 FOUT 為主，避免文字看不見。 - 字重 (Font Weight)
- 指字型的粗細。以 100 (Thin) 到 900 (Black) 的數值表示，標準粗細為 400 (Regular)，粗體為 700 (Bold)。對於許多網頁字型，您需要指定要載入的字重。
常見問題
- Q.中文字型會影響載入速度嗎？
- 會的，因為中文包含大量的字元，與英文字型相比檔案大小大很多，可能會影響網頁載入速度（特別是 LCP 等 Core Web Vitals 指標）。不過，Google Fonts 使用了「動態子集化 (Dynamic Subsetting)」技術，能自動分割並只傳送網頁上實際使用到的字元，使其載入速度比一般的網頁字型快。
- Q.有什麼推薦的字型搭配（組合）嗎？
- 經典的作法是標題使用具有特色的「襯線體 (Serif)」或「裝飾體 (Display)」，並結合高易讀性的「無襯線體 (Sans-serif)」作為長篇內文。例如，「Noto Serif TC（標題） × Noto Sans TC（內文）」的組合能同時兼顧信賴感與易讀性，被許多企業網站所採用。
- Q.我輸入的文字資料安全嗎？
- 是的，絕對安全。本工具完全在客戶端（您的瀏覽器中）運作，您輸入用於預覽的文字或設定資料絕不會傳送到或儲存在任何外部伺服器。您可以安心預覽機密性高的文字。
- Q.如何避免 FOUT 和 FOIT 發生？
- 透過在 CSS @font-face 中指定 `font-display: swap;`，文字在網頁字型載入前會先以系統字型顯示，可避免使用者遇到看不見文字的情況。
- Q.是否允許商業用途？
- 本工具載入的 Google Fonts 皆在開源授權（如 OFL）下提供，通常可以免費使用於商業和非商業用途。
使用場景
網頁設計原型製作
當您在為網站的主視覺或標語尋找完美的字型時，無需開啟設計軟體，即可直接在瀏覽器中直覺地查看並比較字型的氛圍與外觀。
排版微調與程式碼產生
開發人員在寫程式時，不僅可以微調設計稿上指定的字型，還能調整粗細和行高以得出最佳的 CSS 數值，然後直接複製貼上產生的程式碼以加速開發。
製作簡報與橫幅前的確認
在使用 Canva 或 PowerPoint 等工具製作素材或橫幅前，適合透過在短時間內並排比較多個候選字型，來客觀評估哪種字型最能有效傳達您的訊息。
字型搭配 (Pairing) 驗證
您可以透過並排顯示，同時預覽用於標題的裝飾性字型和用於內文的易讀性字型的組合（搭配）是否協調。
Send Feedback
Please let us know your thoughts to help us improve the tool.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.