font-display: optional 才是移动端稳解，但需搭配子集字体、preload 与 crossorigin；否则 fallback 或 foit，且必须锁定容器尺寸、优化 fallback 链。
单独加 font-display: swap 不仅不能避免移动端 CLS，反而会让抖动更明显——中文字体体积大、系统字体度量差异大、iOS Safari 渲染延迟叠加，导致“先闪再跳”。
为什么 font-display: swap 在移动端特别容易翻车
它只控制“是否等待”，不控制“换完之后占多大地方”。移动端常见问题包括：
- iOS Safari 对后备字体（如
PingFang SC）和 Web 字体（如Inter或中文字体）的ascent/x-height计算偏差更大，替换后行高突变 - 2MB+ 的中文字体在 3G 下加载超 2 秒，swap 等着换，用户早已滚动，中段内容突然上移/下移一帧
- Android Chrome 低内存设备可能延迟触发重绘，造成文字先正常、再错位、最后才对齐
- 本地无抖动 ≠ 线上稳定：本地字体已缓存，而线上首次访问 + 高 DPR 屏幕 + 不同 fallback 链 = 必现抖动
必须配齐的三项硬性操作
缺一不可，否则预加载白写、size-adjust 不生效、optional 变成摆设：
-
<link rel="preload" as="font" href="/fonts/your-font.woff2" type="font/woff2" crossorigin>——crossorigin缺失，Chrome 直接忽略预加载，后续@font-face仍会重新发起请求 -
@font-face中每个字重（font-weight: 400/700）必须独立声明，且都带font-display: optional或swap；混用（比如 Regular 用swap，Bold 用auto）会导致部分文字永远 fallback - 中文字体必须子集化：完整思源黑体 >8MB，
optional的 100ms 窗口根本无法命中；首屏只需「标题+按钮+表单提示」几十个字，子集可压到 ≤200KB
font-display: optional 才是移动端稳解，但有前提
optional 是唯一不触发替换、不引发重排的值，但它不是设了就灵：
- 必须搭配子集字体 +
preload+crossorigin，否则浏览器连试都不试，直接 fallback - 只对首屏必需字重生效：比如导航栏用
font-weight: 600，就只子集并 preload 这个粗体，别把300/italic全塞进去 -
optional在 Safari 15.4+ 和 Chrome 87+ 支持，旧版 iOS 会退化为 FOIT（白屏），所以仍需设置合理 fallback 链：font-family: 'YourFont', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif - 不要指望它“最终总会加载出来”——它的设计哲学就是“100ms 拿不到就放弃”，所以必须接受首屏永远用系统字体的事实
尺寸锁定比 font-display 更关键
就算用了 optional，如果容器没锁尺寸，图标错位、按钮高度变化、flex 折行依然会发生：
- 给所有含文本的容器加
min-height或aspect-ratio：比如标题栏设min-height: 48px，按钮设height: 44px - 慎用
line-height: normal—— 它依赖字体实际度量，不同 fallback 下结果天差地别；改用line-height: 1.5这类固定值 - 中英文混排时，
font-size-adjust比size-adjust兼容性更好（Safari 17.4+ 才支持后者），推荐优先试font-size-adjust: 0.97这类实测值 - 用 Chrome DevTools → Rendering → 勾选
Layout Shift Regions，硬刷新看红框是否集中在字体区域——如果红框出现在按钮或卡片边缘，说明是容器尺寸没锁死，不是字体问题
真正稳的方案不是调一个属性，而是让字体加载这件事“彻底不可见”：子集够小、preload 到位、容器尺寸铁板一块、fallback 链靠谱。任何环节松动，移动端的抖动就会从“偶发”变成“必现”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
