font-size-adjust:fallback 不再时大时小
web 字体还没下载完时，浏览器先用系统 fallback 字体渲染。问题是：同样 font-size: 20px，不同字体的 x-height（小写字母实际高度，度量概念见字体度量）差很多——衬线字体 x-height 偏矮、Verdana
这类偏高——于是字体一换，文字视觉大小发生跳变，造成布局偏移（CLS）。font-size-adjust 把字号锚定到 x-height 比例而非 em，让 fallback 和目标字体看起来一样大。
1 · 它到底做了什么
font-size-adjust: a 的意思是：不管用哪款字体，都让它的 x-height = a × font-size。浏览器据此把实际渲染的字号缩放成
。给 fallback 设上目标字体的 aspect，fallback 的小写就和目标一样高，换字时几乎看不出跳动。
| 写法 | 含义 |
|---|---|
| none | 默认。按 em 渲染，x-height 随字体自由浮动（就会跳） |
<number>
|
把 x-height 锁到
（如 0.5）
|
| from-font | 自动取首选字体的 aspect，无需手填数字——最便捷 |
ex-height / cap-height / ch-width … <number>
|
两值语法：换个度量基准对齐（大写高 / 字宽等），不只 x-height |
本页 demo 的「= 目标 aspect」，就是把左栏字体用 Canvas 量出的 x-height 比例写进右栏的 font-size-adjust，等价于 from-font 取到目标值的效果。
实战：配合 @font-face 的 size-adjust / ascent-override 等描述符，可以把 fallback 调到和 web 字体几乎像素级吻合，把字体交换造成的布局抖动（CLS）压到接近 0。现代浏览器（Chrome 127+ / Firefox 3+ / Safari 16.4+，from-font
与双值语法需 Safari 17+）已普遍支持 font-size-adjust（核对于 2026-07）。
2 · 相关链接
- font-size-adjust is now in Chrome——web.dev。本页蓝本。讲 font-size-adjust 怎么用 x-height 对齐 fallback、from-font 关键字、两值语法（ex-height / cap-height / ch-width / ic-width），以及和减少 CLS 的关系。
- font-size-adjust · MDN——developer.mozilla.org。语法与各取值（number / none / from-font / 两值）的精确定义、计算公式与浏览器支持。
-
Never use px for font sizes——joshcollinsworth.com。尺寸的另一面：正文 font-size 该用
rem而非px——px 会无视用户在浏览器里设的字号偏好，损害可访问性；rem 跟随根字号缩放。和本页的「视觉尺寸对齐」互补。