ascent-override 要生效需同时满足三条件：正确计算百分比（typoascender / unitsperem × 100%）、声明 font-optical-sizing: none、且浏览器确实在用 fallback 字体渲染；fallback 字体栈须度量接近，否则覆盖值失效。
ascent-override 能对齐后备字体度量，但前提是：你算对了百分比、写了 font-optical-sizing: none、且浏览器真正在用 fallback 渲染——三者缺一不可。
怎么算出正确的 ascent-override 百分比
别凭感觉写 90% 或 100%，必须从字体文件里读真实值：
- 用
opentype.js加载字体，取font.tables.os2.typoAscender和font.unitsPerEm - 计算公式是：
ascent-override: ${typoAscender / unitsPerEm * 100}% -
typoDescender是负数，descent-override要用Math.abs(typoDescender) / unitsPerEm * 100 - 别用
capHeight或xHeight——它们不参与行盒高度计算
为什么加了 ascent-override 却没生效
最常见原因是 Chromium 忽略了你的覆盖值，因为默认开启了光学缩放：
- 必须显式写
font-optical-sizing: none，否则ascent-override可能被静默丢弃 -
font-display: swap必须存在，否则 fallback 阶段根本不会触发度量覆盖 - 检查 DevTools → Elements → Computed → Font metrics，确认当前渲染的字体确实是 fallback（比如
system-ui），而不是已加载的 WebFont
后备字体栈选错，ascent-override 全白搭
你为「庞门正道标题体」配的 ascent-override: 100%，只对齐它自己；如果 fallback 到 sans-serif，而用户系统实际用的是 Helvetica，那这个 100% 就完全错位：
- 优先选度量接近的 fallback，比如 Inter 配
'Inter', 'system-ui', sans-serif -
system-ui在 macOS/iOS/Windows 上分别对应 San Francisco / Segoe UI / Roboto，度量较统一 - 避免用
PingFang SC这类非跨平台字体作 fallback —— Mac 没装就直接兜底到更远的sans-serif，覆盖值彻底失效
line-gap-override: 0% 是不是必须加
不是必须，但加了更容易控制行高一致性：
-
line-gap-override直接影响行盒的 baseline-to-baseline 距离，和 CSS 的line-height行为不同 - 若 WebFont 和 fallback 的原生 line gap 差异大（比如一个 12%，一个 0%），不设会放大布局抖动
- 设成
0%后，靠line-height单独控制视觉行高，更可控
真正难的不是写那几行 CSS，而是确认 fallback 字体在目标设备上到底是什么、它的度量参数是多少——这一步没法靠代码自动完成，得实机测、真机抓。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
