我敢打賭字體相關的CSS單位：em、rem、px、pt您一定用到滾瓜爛熟了，甚至vh、vw您可能都會用到字體上面，那我就來介紹一些不一樣的字體單位。

CSS的字體相關特殊單位介紹：ex、ch、cap、lh，您用過那些？

各位網頁設計師好！身為前端工程師的你，是否曾經在調整文字排版時感到困擾？今天就讓我們一起深入探討 CSS 中那些不太為人所知，卻非常實用的字體相關特殊單位。這些單位不只能讓你的網頁設計更加精準，更能為使用者帶來絕佳的閱讀體驗！

為什麼要認識這些特殊單位？

在現代網頁設計中，響應式設計已經成為標配。但你可能會發現，單純使用 px 或 rem 往往無法完美解決所有排版需求。這時候，了解更多字體相關的特殊單位，就能讓你的網頁設計更加靈活且專業。

讓我們先來看看這些單位的基本比較：

單位
相對參考
適用場景
兼容性
ex
小寫字母 x 的高度
垂直間距調整
優良
ch
數字 "0" 的寬度
等寬字體排版
佳
cap
大寫字母高度
標題設計
新版瀏覽器
lh
當前元素行高
段落間距
新版瀏覽器

深入解析各單位特色

ex 單位：精確的垂直對齊好幫手

在網頁設計中，ex 單位是以小寫字母 x 的高度為基準。這個單位特別適合用在：

1. 上標下標的位置調整

css
.superscript {
    position: relative;
    top: -1ex;
    font-size: 0.8em;
}

2. 圖示與文字的垂直對齊

css
.icon {
    margin-top: 0.5ex;
    vertical-align: middle;
}

實務上，很多網頁設計師會用它來處理複雜的文字排版，特別是在多語言網站中，因為它能自動適應不同字體的特性。

ch 單位：等寬排版的最佳選擇

ch 單位以數字 "0" 的寬度為基準，這讓它在處理等寬內容時特別好用：

css
.code-block {
    width: 80ch;  /* 完美控制程式碼區塊寬度 */
    font-family: monospace;
}

.input-field {
    width: 20ch;  /* 限制輸入框寬度 */
    max-width: 100%;
}

在現代網頁設計中，ch 單位對於建立整齊的表單佈局特別有幫助。

cap 單位：大寫字母的新選擇

cap 單位是較新的單位，它以大寫字母的高度為基準。在設計字體較大的標題時特別好用：

css
.main-title {
    margin-top: 2cap;
    line-height: 1.5cap;
    font-size: 2rem;
}

很多網頁設計師發現，使用 cap 單位能讓標題的間距更加協調。

lh 單位：行高掌控的新寵兒

lh 單位直接參考元素的 line-height 值，這讓它在處理段落間距時特別方便：

css
.article-content {
    margin-bottom: 1lh;
    line-height: 1.5;
}

.paragraph {
    margin-top: 1lh;
    text-indent: 2ch;
}

實務應用建議

在現代網頁設計中，這些單位的組合運用更能展現出專業水準：

1. 表單設計

css
.form-group {
    margin-bottom: 1lh;
}

.form-label {
    margin-bottom: 0.5ex;
}

.form-input {
    width: 40ch;
    padding: 0.5ex 1ch;
}

2. 文章排版

css
.article {
    max-width: 80ch;
    margin: 1cap auto;
}

.article h2 {
    margin-top: 2lh;
    margin-bottom: 1lh;
}

瀏覽器支援度與效能考量

在進行網頁設計時，我們需要注意這些特殊單位的瀏覽器支援情況：

• ex 和 ch：支援度極佳，可放心使用
• cap 和 lh：需要注意舊版瀏覽器的相容性

建議在使用這些單位時，可以提供適當的備援方案：

css
.modern-layout {
    /* 舊版瀏覽器備援 */
    margin-top: 20px;
    /* 新版瀏覽器樣式 */
    margin-top: 1cap;
}

在現代網頁設計中，靈活運用這些特殊單位可以讓你的排版更加精確和專業。

特別是在處理：

• 多語言網站
• 響應式設計
• 表單佈局
• 文章排版

這些場景時，善用這些單位能讓你的網頁設計更上一層樓。記住，沒有最好的單位，只有最適合的應用場景。在實際專案中，建議根據需求選擇合適的單位組合。

期待這篇文章能幫助大家在網頁設計的路上走得更穩健！如果你有任何相關經驗，也歡迎在我們的社群留言分享喔！