仅靠 font-display: swap 无法避免布局偏移，必须配合 font-metrics 覆盖、预加载和容器尺寸锁定；swap 只控制渲染时机，不解决字体替换导致的度量差异引发的重排。
直接结论：仅靠 font-display: swap 无法真正避免布局偏移（CLS），必须配合字体度量调整、预加载和容器尺寸锁定 —— 否则线上首屏抖动几乎必然发生。
font-display: swap 为什么不够用
它只解决“文本是否可见”，不解决“文本换字体后尺寸变不变”。swap 会让浏览器用系统字体先渲染，等自定义字体加载完立刻替换。但系统字体（如 Microsoft YaHei）和自定义字体（如 PangMenZhengDaoBiaoTi）的 ascent、descent、line-gap 差异很大，导致行高、字宽、基线位置变化，容器重排 → 右侧抖动、按钮跳位、标题错位。
常见错误现象：
本地无抖动（字体已缓存），线上首次访问右侧内容突然右移 2–5px；CLS 报告中该元素贡献值高达 0.15+；滚动时标题区域轻微上下浮动。
-
font-display: optional虽能彻底规避布局偏移，但会放弃使用自定义字体（尤其在弱网或首次访问时），不推荐用于品牌字体 -
font-display: fallback有 100ms 阻塞 + 3s 交换窗口，仍可能触发抖动 -
swap是平衡可用性与稳定性的起点，但绝不是终点
必须设置 font-metrics 覆盖参数
CSS 的 ascent-override、descent-override、line-gap-override 能强制让后备字体“假装”成目标字体的度量，从而保持容器尺寸一致。这些值需实测，不能凭空填写。
操作步骤：
- 用 Chrome DevTools → Elements → 计算样式，分别查看 fallback 字体和自定义字体的
font-size、line-height、ascent（在 Font Metrics 面板）、descent值 - 以自定义字体为基准，反向计算 fallback 字体应“模拟”的比例：例如自定义字体 ascent 是 920，系统字体是 850，则
ascent-override: calc(920 / 850 * 100%) ≈ 108.2% - 在
@font-face中写入三参数，且必须与font-display: swap共存
示例：
@font-face {
font-family: '庞门正道标题体';
src: url('./fonts/PangMenZhengDaoBiaoTi.woff2') format('woff2');
font-display: swap;
ascent-override: 108.2%;
descent-override: 22.5%;
line-gap-override: 0%;
}
预加载 + 容器尺寸锁定是上线前必做项
预加载确保字体资源进入高优先级队列；尺寸锁定防止即使度量对齐后，因字号缩放、行数变化等次要因素引发微小偏移。
- 在
中添加<link rel="preload">，注意必须带crossorigin（字体是匿名请求）：<link rel="preload" href="/fonts/PangMenZhengDaoBiaoTi.woff2" as="font" type="font/woff2" crossorigin> - 对所有使用该字体的容器，显式设置
min-height或height，值取自字体实际渲染高度（含行距）：.hero-title { font-size: 96px; line-height: 1.15; min-height: 110px; } - 避免仅靠
flex或text-align: center居中却不设高度 —— 这会让容器随字体切换收缩/撑开
Next.js 用户请直接用 next/font
它自动完成上述三项：构建时下载字体、分析并注入 size-adjust（比手动写 ascent-override 更准）、自动插入 preload、托管字体到本地。你只需两行代码：
import { Inter } from 'next/font/google'
<p>const inter = Inter({ subsets: ['latin'], display: 'swap' })</p>
然后在根组件加 className={inter.className}。无需手写 @font-face，也不用管 WOFF2 路径或 crossorigin —— 这些全是黑盒里处理好的。如果你还在手动配 font-display 和 preload，说明没用上这个能力。
真正容易被忽略的是：next/font 生成的 size-adjust 值依赖构建时的字体文件。若你后期替换了字体文件但没重新构建，旧的度量值就会失效，抖动重现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
