ascent-override 和 descent-override 是 @font-face 专用描述符，需配对使用以准确控制行盒高度和基线位置；单独设置会导致布局抖动。
ascent-override 和 descent-override 是什么，为什么必须配对用
这两个是 @font-face 的描述符，不是 CSS 通用属性，不能写在 p 或 h1 里。它们的作用是「告诉浏览器：别信 fallback 字体的原始度量，改用我指定的百分比值来算行高和基线位置」。单独设 ascent-override 而不设 descent-override，布局抖动大概率还在——因为浏览器仍按 fallback 字体的 descent 算底部空间，上下错位就产生了。
- ascent-override 对应字体「上升部高度」，影响文字顶部到基线的距离，类似视觉上的
padding-top - descent-override 对应「下降部高度」，影响基线到底部的距离，类似
padding-bottom - line-gap-override 控制行间空隙，默认为 0%，设成正数会加高行距，设负数可能引发重叠
怎么拿到靠谱的百分比数值（别瞎猜）
直接写 ascent-override: 95% 这类值不是拍脑袋定的。真实值得从字体文件里读出来。推荐用 opentype.js 解析 TTF/OTF 文件：
const font = await opentype.load('PangMenZhengDaoBiaoTi.ttf');
console.log(font.tables.os2.typoAscender); // 比如 1000
console.log(font.tables.os2.typoDescender); // 比如 -200
console.log(font.unitsPerEm); // 比如 1000
然后换算成百分比：ascent-override: ${typoAscender / unitsPerEm * 100}%descent-override: ${Math.abs(typoDescender) / unitsPerEm * 100}%
- typoAscender / unitsPerEm 是标准比例，多数现代字体在 0.8–0.95 之间
- typoDescender 是负值，取绝对值再除；如果结果是 15%，就写
descent-override: 15% - 别用 capHeight 或 xHeight 去算——它们不参与行盒（line box）高度计算
fallback 字体栈选错，override 全白搭
ascent-override 生效的前提，是浏览器真正在用 fallback 字体渲染——也就是 WebFont 还没加载完、font-display: swap 触发回退时。如果你的 font-family 写成 '庞门正道标题体', 'PingFang SC', sans-serif，而用户 Mac 上没有 PingFang SC，最后兜底到系统默认的 sans-serif（比如 macOS 的 Helvetica），那 override 的值就完全对不上这个兜底字体的真实 metrics。
- 优先选度量接近的 fallback：比如 Inter 字体可配
'Inter', 'system-ui', sans-serif，其中system-ui在各平台都有较一致的 baseline 行为 - 避免混用 serif/sans-serif 类别 fallback，例如
'Inter', Georgia, sans-serif—— serif 字体 descent 通常更大，override 值一塞进去反而放大错位 - 用 Edge DevTools 的「字体编辑器」功能，实时切换 fallback 并观察 baseline 变化，比纯猜可靠得多
Chrome 和 Safari 渲染差异大，别只测一个浏览器
Safari 对字体度量更严格，尤其当 ascent-override 和 descent-override 没配齐或 fallback 不当时，图标、按钮文字、甚至 inline-block 元素都可能上下偏移几个像素。Chrome 则倾向“视觉居中”，容易掩盖问题，上线后用户反馈右侧抖动，八成是在 Safari 里暴露的。
- 务必在 Safari 技术预览版（TP）里验证，它对新字体描述符支持更激进
- 如果用了图标字体，检查是否所有图标 glyph 都落在同一 baseline 上；有些工具导出的图标字体，每个 glyph 的 vertical origin 不一致，override 也救不了
-
font-optical-sizing: none建议加上，避免浏览器自动缩放导致 metrics 偏移
实际生效的关键不在参数多精细，而在 fallback 字体与 override 值之间的匹配是否稳定——这点最容易被跳过，但恰恰是线上抖动反复出现的根因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
