CSS如何防止布局抖动CLS？通过size-adjust属性优化字体加载

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《CSS如何防止布局抖动CLS？通过size-adjust属性优化字体加载》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

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 再准，也盖不住其他抖动源。

理论要掌握，实操不能落！以上关于《CSS如何防止布局抖动CLS？通过size-adjust属性优化字体加载》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！