🔤
typography preview,
文字大小與行距 即時預覽
使用滑桿即時調整font-size、line-height、letter-spacing。
確認最佳排版並複製CSS。
🎛️
4項屬性同時調整
font-size/line-height/letter-spacing/font-weight
📋
CSS程式碼輸出
一鍵複製調整結果的CSS
🔤
支援Google Fonts
亦可預覽中文Web字型
font-size16px
line-height1.75
letter-spacing0.05em
font-weight400
預覽
中文排版中，文字大小、行距及字距的平衡非常重要。透過適當的設定，可以實現易於閱讀且美觀的文字版面配置。 The quick brown fox jumps over the lazy dog. 0123456789 !@#$%^&*()
↑ 點擊文字即可直接編輯
生成的CSS
about,
概要
文字大小與行距即時預覽工具，是一款可透過滑桿直覺調整CSS的font-size、line-height、letter-spacing、font-weight，並即時預覽文字外觀的工具。
支援載入Google Fonts的日文字型（如Noto Sans JP・Noto Serif JP等），也可使用實際的Web字型進行預覽。確定設定後，只需一鍵即可複製輸出的CSS。
※僅在載入Google Fonts（取得字型檔案）時會產生外部連線。輸入的文字與設定值皆不會傳送至外部伺服器。
how to,
使用方法
STEP 1
使用滑桿調整
移動font-size、line-height、letter-spacing、font-weight的各個滑桿。也可以從預設值開始，以便快速調整。
STEP 2
確認預覽
在預覽區即時確認文字的外觀。可直接點擊文字來編輯內容。
STEP 3
複製CSS
點擊「複製CSS」按鈕，將生成的程式碼複製到剪貼簿並貼上到您的專案中。
glossary,
詞彙表
- font-size
- 指定字型大小的CSS屬性。可使用px、em、rem、%等單位。Web上瀏覽器的預設值為16px。
- line-height
- 指定行距（行高）的CSS屬性。建議使用無單位的數值（例：1.75）。中文內文以1.6〜1.9較易閱讀。
- letter-spacing
- 指定字距（字元間距）的CSS屬性。建議使用em單位。中文約0.05em較為自然。
- font-weight
- 指定字型粗細的CSS屬性。可以使用100〜900的數值或「bold」、「normal」來指定。
- font-family
- 指定使用字型的CSS屬性。可用逗號分隔指定多個備用字型。
- 排版
- 文字的視覺配置與設計全貌。由文字大小、行距、字距、字型選擇等要素組成。
- Google Fonts
- Google提供的免費Web字型服務。也提供豐富的日文字型如Noto Sans JP等。
- Web字型
- 從伺服器下載使用的字型。可透過@font-face使用自訂字型，或透過CDN使用Google Fonts等。
- 易讀性（Readability）
- 文字是否容易閱讀的指標。適當的字型大小、行距與對比度能提升易讀性。
- rem / em
- CSS的相對單位。rem以根元素的font-size為基準，em以目前元素的font-size為基準。適合用於響應式設計。
faq,
常見問題
- Q.與舊版網站的字型預覽有何不同？
- 舊版網站的web-font-previewer主要目的是「字型的比較與選擇」。本工具則專注於font-size/line-height/letter-spacing的微調以及CSS程式碼的輸出。
- Q.載入Google Fonts會傳送資料嗎？
- 僅在取得字型檔案時會與Google伺服器連線。輸入的文字及設定值絕對不會被傳送出去。
- Q.輸入的文字會傳送到伺服器嗎？
- 不會。所有文字都只在瀏覽器內處理。
- Q.可以使用日文以外的字型嗎？
- 雖然預設值以日文字型為主，但您也可以直接輸入字型家族名稱來指定其他字型。
- Q.可以直接輸入數值來指定滑桿的值嗎？
- 目前僅支援滑桿操作，但您可以透過預設按鈕快速套用典型的設定值。
- Q.可以在手機上使用嗎？
- 可以。滑桿支援觸控操作。
use cases,
應用場景
🎨
Web設計的排版規劃
可以在視覺上確認並決定標題、內文、說明文字等各種文字元素的最佳設定值。
📖
最佳化部落格文章的易讀性
調整內文的行距與字距，找出能提升長篇文章易讀性的設定值。
🖥️
確認簡報資料的字型設定
可以事先確認簡報投影片中使用的字型大小與行距的組合。
🎓
學習CSS排版
透過移動滑桿，可以在視覺上學習CSS屬性的效果。
發送反饋
請告訴我們您的想法，以幫助我們改進工具。
反饋發送成功。感謝您的合作！
發生錯誤。請稍後再試。
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.