做網(wǎng)頁的人都懂：為了讓字體“看著”對(duì)齊，我曾在字號(hào)上反復(fù)調(diào)半天。紙面上同樣是 16px，屏幕上卻一個(gè)顯小、一個(gè)顯胖——真的抓狂。

問題根源并不神秘：不同字體的 x-height、cap height、字形比例都不一樣。于是“數(shù)值相同 ≠ 視覺一致”。

字體的“身高差”，不是字號(hào)能解釋的

• x-height：小寫字母（比如 x）的高度
• 有的字體（如 Helvetica）x-height 偏高；
• 有的（如 Times New Roman）偏矮。

body { font-size: 16px; }
.font-helvetica { font-family: Helvetica; }
.font-times { font-family: "Times New Roman"; }

理論上應(yīng)一致，視覺上卻完全兩種感覺：Helvetica 更“高壯”，Times 更“瘦長”。想做干凈利落的 UI？這就成了噩夢(mèng)。

解藥：font-size-adjust

它允許按 x-height 比例來縮放字體，而不是只看字號(hào)。

font-size-adjust: ex-height 0.5;

上面這行的意思是：讓字體的 **x-height ≈ 字號(hào)的 50%**。一加上去，Helvetica 和 Times 的視覺高度就更接近了。

很多“教程”把 font-size-adjust 只當(dāng)字體回退（fallback）時(shí)的補(bǔ)救：

font-family: Futura, sans-serif;

如果主字體 Futura 加載失敗，就給 fallback 一個(gè) font-size-adjust，讓它看起來更像 Futura。

我不完全同意。在同一頁面混用多種字體時(shí)，font-size-adjust 更有用：不同字體天生不一樣，你很難靠改字號(hào)來“抹平”。把它放進(jìn)你的 CSS Reset，整個(gè)體系就會(huì)穩(wěn)很多：

/* 建議放進(jìn) reset，與 box-sizing 同級(jí)別 */
:root {
  font-size-adjust: ex-height 0.53; /* 0.53 對(duì) Helvetica 觀感不錯(cuò)，可按項(xiàng)目微調(diào) */
}

快速上手清單

1. 先選主字體，用一兩段真實(shí)文案看觀感（尤其中英文混排）。
2. 設(shè)一個(gè)基準(zhǔn)系數(shù)（0.50–0.56 區(qū)間常見，0.53 是個(gè)不錯(cuò)的起點(diǎn)），放在全局或特定容器上。
3. 多字體并存時(shí)（標(biāo)題/正文字體不同、英文字體/中文字體混排），**讓它們都繼承同一 font-size-adjust**。
4. 測(cè)一測(cè)回退鏈：主字體未加載時(shí)，fallback 的視覺是否還能“對(duì)版”。
5. 瀏覽器支持與細(xì)節(jié)請(qǐng)看 MDN，新語法 ex-height 相比舊的純數(shù)字寫法更直觀。

兼容性提示：現(xiàn)代瀏覽器已基本支持；舊環(huán)境可降級(jí)為傳統(tǒng) font-size-adjust: 0.53; 寫法，或針對(duì)關(guān)鍵模塊開啟。

代碼片段示例

/* 全局策略：對(duì)齊視覺高度，而非死磕字號(hào) */
:root {
  /* 以 x-height 比例為準(zhǔn)，統(tǒng)一不同字體的“視覺身高” */
  font-size-adjust: ex-height 0.53;
}

/* 示例：標(biāo)題與正文兩套字體 */
h1, h2, h3 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body {
  font-family: "Times New Roman", Times, serif;
  font-size: 16px;
  line-height: 1.55;
}

結(jié)論

當(dāng)你需要做一套觀感統(tǒng)一、多字體共存的 UI 時(shí)，別再只盯著 font-size 和 line-height。 把 font-size-adjust 加進(jìn)你的樣式基線，它能在“同字號(hào)不同觀感”的坑里，幫你省下大量微調(diào)時(shí)間。