你以为字体只能靠缘分？今天 font-size-adjust 把这件事彻底原生化了

你有没有遇到过这种情况：线上字体加载失败了，浏览器默默换成了 Arial——然后整个版心突然变大或者缩小，设计师跑过来问你「这字体怎么肥了」，你只能尴尬地说「字体加载失败了」？

这不是你的问题。不同字体在同样的 font-size 下，视觉大小可能差出 30%。

问题出在哪

每种字体都有自己的 x-height——就是小写字母「x」的高度，除以 font-size 得到的比值叫 aspect value（字面比）。两个字体都声明 16px，Arial 的 x-height 是 8.3px（aspect≈0.52），Georgia 只有 7.7px（aspect≈0.48）。在浏览器眼里它们都是「16px」，但在用户眼里 Georgia 的 16px 明显比 Arial 的 16px 小一号。

所以当自定义字体加载失败、浏览器回退到系统字体时，即便你写了完全一样的 font-size，文字也会突然变大或变小。CLS（布局偏移）就是从这儿来的。

font-size-adjust 怎么修

Chrome 127+ 稳定支持了 font-size-adjust 属性，原理很简单：告诉浏览器「回退字体应该按这个 aspect value 来缩放」，保持和小写字母高度一致。

body {
font-family: “Inter”, Arial, sans-serif;
font-size-adjust: 0.53;
}

当 Inter 加载失败、浏览器回退到 Arial 时，会自动把 Arial 缩放到 x-height=0.53×font-size 的视觉效果。布局基本不变，CLS 归零。

实测数据

配了八年字体，每次 fallback 设计师都要来找你——今天一个属性把它原生化了。

怎么拿到你的 aspect value

两个办法。

直接查表（常见字体已有数据）：

/ Inter 栈 /
font-size-adjust: 0.53;
/ Playfair Display 栈 /
font-size-adjust: 0.47;

用 @font-face 调：Chrome 127+ 的 @font-face 支持 size-adjust、ascent-override、descent-override 描述符，可以对回退字体做像素级修正：

@font-face {
font-family: FallbackArial;
src: local(Arial);
size-adjust: 102%;
ascent-override: 90%;
descent-override: 25%;
}

两种方式可以叠加：font-size-adjust 管新浏览器，@font-face 描述符兜底老版本。

坑

• 旧版 Firefox（119 以下）支持，新版 Firefox（119+）移除了，但 Chrome/Safari 已补上空白，全球覆盖 88%+
• aspect value 算错了整条链都歪，建议从字体设计文件或 Font Squirrel 的 x-height 计算器里拿准确数字
• @font-face 的 size-adjust 比 font-size-adjust 更精确，但需要多写几行，适合高频使用的核心字体栈

三步下一步

1. 打开 Chrome DevTools → Network → 勾 Disable cache，刷新页面，看是否有字体 404 导致回退
2. 用 Font Squirrel 或 fontkit 计算你主字体的 aspect value，加到 font-size-adjust
3. 用 @font-face 的 size-adjust 描述符给老版本做兜底，写完记得用 LambdaTest 跑一下 Chrome 126 和 Safari 16

字体回退这件事，以前靠缘分，今天靠 CSS。