🔤
typography preview,
文字大小與行距 即時預覽
使用滑桿即時調整font-size、line-height、letter-spacing。
確認最佳排版並複製CSS。
🎛️
4項屬性同時調整
font-size/line-height/letter-spacing/font-weight
📋
CSS程式碼輸出
一鍵複製調整結果的CSS
🔤
支援Google Fonts
亦可預覽中文Web字型
font-size 16px
line-height 1.75
letter-spacing 0.05em
font-weight 400
預覽
中文排版中，文字大小、行距及字距的平衡非常重要。透過適當的設定，可以實現易於閱讀且美觀的文字版面配置。
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屬性的效果。
Send Feedback
Please let us know your thoughts to help us improve the tool.
Feedback sent successfully. Thank you for your cooperation!
An error occurred. Please try again later.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.