font-display: swap需配合preload、font-size-adjust和min-height容器兜底才能缓解移动端cls，单独使用反而加剧布局跳动。
font-display: swap 能缓解移动端字体加载时的“闪一下”，但单独用它反而容易放大布局偏移（CLS），尤其在 iOS Safari 和 Android Chrome 上——必须配合 preload、font-size-adjust 和容器兜底，否则只是把“闪”从“空白”换成“跳动”。
font-display: swap 在移动端的真实表现
它让浏览器立即用后备字体渲染文字，等 Web 字体就绪后立刻替换。听起来很理想，但问题在于：iOS Safari 对后备字体与 Web 字体的行高计算差异更敏感；Android Chrome 在低内存设备上可能延迟触发重绘，导致文字先正常显示、再突然上移/下移一帧。
常见错误现象：FOUT 变成 FOIT + FOUT 混合——首屏文字先闪出系统字体，等 1–2 秒后又跳一次才稳定；或者图标字体（如 Iconfont）在 swap 下出现错位图标+文字重排。
- 不要只在
@font-face里写font-display: swap就以为万事大吉 - 确保该声明出现在所有关键字体的
@font-face规则中，而非仅用于主文本字体 - 避免对同一字体家族混用不同
font-display值（比如 Regular 用swap，Bold 用optional），会加剧不一致
必须搭配 preload 才能降低 swap 的不确定性
移动端网络波动大，swap 的“等字体加载完再换”行为极易受延迟影响。不预加载的话，字体可能在用户已经开始滚动后才到达，造成中段内容突然跳动。
正确做法是在 最前面加预加载，并严格匹配 crossorigin：
<link rel="preload" as="font" href="inter-var-latin.woff2" type="font/woff2" crossorigin>
-
crossorigin缺失会导致预加载失效，尤其在使用 CDN 或跨域字体时 - 必须用
as="font"，写成as="style"或漏掉会降级为普通 fetch，失去优先级优势 - WOFF2 格式优先；TTF/OTF 在 iOS 上解析更慢，易延长闪烁窗口
font-size-adjust 是防跳动的关键补丁
font-display: swap 解决的是“要不要等”，而 font-size-adjust 解决的是“换了之后别乱动”。它通过锁定字体的 ex 高度比例，让不同字体在相同 font-size 下保持基线和行高稳定。
思源黑体、Inter 等主流无衬线体的 aspect value 在 0.5–0.6 之间，推荐写法：
body { font-size-adjust: 0.52; line-height: 1.6em; }
- 必须用
em或rem单位设line-height，禁用无单位数值（如line-height: 1.6）——后者仍会随字体度量浮动 - Safari 17+ 和 Chrome 119+ 才完整支持
font-size-adjust；旧版需降级为固定min-height容器兜底 - 它对中文效果明显，但对纯图标字体（如 Font Awesome）无效，需另配 SVG 替代方案
移动端必须加 min-height 容器兜底
即使做了上述全部，极端弱网（如 2G 或高丢包）下字体仍可能超时加载。此时若仅靠 CSS 控制，文字容器高度会塌陷或撑开，引发不可预测的跳动。
用 clamp() 给文字块设弹性最小高度是最稳妥的做法：
.text-block { min-height: clamp(1.2em, 4vh, 2rem); }
-
clamp()中间值用视口单位（如4vh）可适配不同屏幕，避免小屏过挤、大屏留白 - 不能只给
line-height加!important——它控制的是行间距，不是容器高度 - 若用 Flex/Grid 布局，记得同时设
align-items: flex-start，防止子元素拉伸干扰高度计算
真正难的不是加哪条规则，而是意识到：移动端没有“一次性配置好就稳了”的字体策略。每次字体更新、每次 iOS 版本升级、甚至每次运营商 DNS 切换，都可能让某条看似稳妥的链路失效——所以兜底必须是视觉可见的，而不是靠 JS 监听或超时移除 class 这类不可靠路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
