什麼是字型排版測試工具？
字體排版測試器讓你即時調整字型屬性並查看效果。選擇字體族，調整字級、字重、行高和間距，然後直接複製 CSS 到你的專案中。
可以設定字體、字級、字重（100 到 900）、行高、字距、詞距、對齊、文字變換和顏色。示例文字可編輯，能直接預覽自己真實的標題或段落，下方 CSS 輸出面板按一下就能貼到樣式表或樣式元件裡。
使用方法
- 在預覽區域輸入或貼上您的範例文字。
- 調整排版控制參數：字體族、字級、字重、行高、字距和詞距。
- 複製 CSS 輸出，直接將排版設定套用至您的專案中。
何時使用
- 調整部落格內文，看看 18px Inter 配 1.6 行高在手機上閱讀舒不舒服。
- 把同一篇長文用 16、17、18px 各看一遍，找出最讓人想讀下去的字級。
- 確認加大字距能不能解決全大寫按鈕文字擠在一起的問題。
結果
一位網頁設計師將 Inter 字體設定為 18px、行高 1.6、字距 0.02em 後，複製 CSS 程式碼用於部落格樣式表。
常見問題
- 內文行高設多少比較合適？
- 16 到 18 像素的長段落，行高設在 1.5 到 1.7 之間在螢幕上讀起來最順。標題應該緊一些，多半 1.1 到 1.3。把標題和段落同時打進示例框，左右一比就知道差別。
- 為什麼字距用 em 而不是 px？
- em 會跟著字級縮放，所以 0.02em 的字距在 14px 和 48px 上看比例一致。用像素設定字距時，常常一個字級剛好，換個字級就不對。
- 網頁上哪些字重可以安心使用？
- 現代 Google Fonts 和可變字體支援 100 到 900，但不少自架字體只附 400 和 700。切換字重後預覽沒變化，多半是字體本身沒有那個字重，瀏覽器只能做合成處理。
- 可以測試頁面沒預載的字體嗎？
- 直接從內建字體選單挑——有搜尋框，還有 無襯線 / 襯線 / 等寬 / 系統 分類篩選，選的 Google Fonts 會自動載入。切到「字體牆」就能用同一段範例文字一次看遍所有字體，或開啟「比較」把兩種字體並排看。這裡不支援上傳自訂字體檔，那種情況要在自己的網站寫 @font-face。
- 怎麼把 CSS 複製到 React 或 Tailwind 專案？
- 按「複製 CSS」會得到標準宣告。React 裡直接貼進 styled-components 的模板字串，或把每行改成駝峰命名物件鍵。Tailwind 把字級和字重對到工具類，自訂的字距和行高用任意值語法。