font-display: swap 仍会导致布局偏移（CLS），因其仅控制显示时机，未解决回退字体与自定义字体度量差异；需配合 size-adjust 微调占位尺寸，且仅 Chromium 和 Safari 17.4+ 支持。
font-display: swap 为什么还不够font-display: swap 确实能避免字体加载阻塞渲染，但只解决“是否显示”，不解决“显示多高”。如果自定义字体和回退字体（如 system-ui 或 Segoe UI）的行高、x-height、字宽差异大，文本块在字体切换瞬间会重排——哪怕只偏移 1px，也会计入 CLS。
常见现象：标题文字加载后突然“变矮”或“撑高”，下方段落整体下移；导航栏图标和文字错位；按钮内文字换行位置突变。
根本原因在于浏览器按回退字体度量分配空间，等自定义字体就绪后，重新测量导致布局变化。
size-adjust 是什么，它改的是哪部分size-adjust 是 @font-face 中的 CSS 描述符，用于**微调回退字体的尺寸映射**，让浏览器在初始渲染时，用调整后的回退字体度量去预留空间，使后续字体替换时视觉位移最小化。
它不改变字体本身，也不影响最终渲染效果，只影响“占位阶段”的尺寸计算逻辑。
关键点：
- 必须配合
font-display: swap使用，单独写无效 - 只对设置了
font-family回退链的元素生效（例如font-family: "MyFont", system-ui;） - 推荐值通常在
95%～105%之间，需实测；过大（如120%）会导致初始占位过高，字体加载后反而“塌陷”
怎么测出合适的 size-adjust 值
没有通用值，必须基于真实字体对齐。操作步骤：
- 在 Chrome DevTools 的 Elements 面板中，选中一段使用自定义字体的文本
- 切换禁用该字体（右键 → “Force font substitution” → 选系统默认字体），观察行高、基线、字宽变化
- 打开 Rendering 面板 → 勾选 “Layout Shift Regions”，刷新页面，看字体切换瞬间是否有红框闪烁
- 尝试在 @font-face 中逐步调整 size-adjust，比如从 100% → 102% → 103%，每次保存后硬刷新（Ctrl+Shift+R），观察红框是否减弱或消失
示例：
@font-face {
font-family: 'Inter';
src: url('inter.woff2') format('woff2');
font-display: swap;
size-adjust: 103%;
}
注意：size-adjust 不支持百分比以外的单位（不能写 1.03 或 103），必须带 %。
容易被忽略的兼容性与副作用
- 目前仅 Chromium 内核（Chrome、Edge、Opera）和 Safari 17.4+ 支持 size-adjust；Firefox 完全不支持（截至 2026 年 4 月）
- 如果回退字体链里有多个字体（如 font-family: "MyFont", "SF Pro Text", system-ui），size-adjust 仅作用于第一个匹配的回退字体，后续字体不参与调整
- 不要和 line-height 混用：显式设置 line-height 会覆盖 size-adjust 对行高的修正效果，应优先靠字体度量自身对齐
真正起效的前提是：你已经为所有图片/视频设了 width/height 或 aspect-ratio，广告位有 min-height，且动态内容插入前已有容器占位——否则，size-adjust 再准，也盖不住其他抖动源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
