font-display: swap 是 @font-face 中控制字体加载时文本渲染行为的属性，它让浏览器立即用系统字体显示文本，待自定义字体加载完成后再无感替换，从而避免移动端因网络波动导致的白屏或文字闪跳。
font-display: swap 是什么，为什么移动端特别需要它
font-display: swap 是 CSS @font-face 规则里的一个属性，控制字体加载期间的渲染行为。移动端网络波动大、首屏资源竞争激烈，如果自定义字体没加载完，浏览器默认会阻塞文本渲染（或显示空白/回退字体长达 3 秒），造成“文字闪跳”或“白屏延迟”。swap 的核心作用是：立刻用系统字体渲染文本，等自定义字体加载完成后再无感替换——这对用户感知至关重要。
- 它不是“加速字体下载”，而是优化“字体不可用时的用户体验”
- iOS Safari 12.2+ 和 Android Chrome 80+ 才完全支持，旧版 WebView 可能忽略该声明
- 不要和
font-display: optional混用；后者可能直接跳过加载，导致字体永远不出现
怎么在 @font-face 中正确写 font-display: swap
关键不是加了就行，而是必须写在 @font-face 块内，且不能被其他规则覆盖。常见错误是把它丢到全局 CSS 或当作类名属性用。
- 必须为每个
@font-face单独设置，不能批量继承 -
font-display必须紧跟在src之后，顺序不影响，但遗漏会导致回退到浏览器默认策略（auto） - 示例写法：
@font-face {
font-family: "PingFang SC";
src: url("fonts/pingfang.woff2") format("woff2");
font-display: swap;
font-weight: 400;
}
- 如果用了多个字重（如 500、700），每个都要单独声明
font-display: swap，否则某个字重没加，就会卡住整行文本渲染
swap 会引发 FOUT，怎么让闪动不那么明显
启用 swap 后，确实会出现 Flash of Unstyled Text（FOUT）：先看到系统字体，再突然换成目标字体。这不是 bug，是预期行为，但可以弱化视觉冲击。
- 优先选和系统字体度量接近的字体：比如用
Inter替代Helvetica Neue，行高、x-height、字宽更接近，替换时位移小 - 避免在
font-size小于 14px 的场景强依赖自定义字体，小字号下系统字体和 Web 字体的渲染差异会被放大 - 不要用
font-feature-settings或font-variation-settings做关键排版，这些特性在 fallback 阶段不生效，swap 后才激活，容易导致布局偏移 - 可配合
size-adjust（实验性）做微调，但目前仅 Chromium 支持，iOS 完全不识别，慎用
font-display: swap 在 iOS 微信 WebView 里还管用吗
基本管用，但有隐藏限制：微信内置 X5 内核（尤其老版本）对 font-display 解析不稳定，部分机型会降级为 block 行为（即等 3 秒再显示文字）。这不是你代码写错了，是环境问题。
- 微信 iOS 8.0.33+、Android 8.0.32+ 对
swap支持较好，但低端安卓机仍可能失效 - 如果发现文字长时间空白，检查是否启用了「WebView 禁用本地字体」策略（某些企业定制版微信会强制关闭）
- 更稳妥的做法是：给关键文案（如标题）加一层
font-family回退链，比如font-family: "YourFont", -apple-system, "SF Pro Text", system-ui;，确保 fallback 字体足够可用
字体加载不是“设了 swap 就万事大吉”，它把问题从“等”转成了“换”，而换的过程是否自然，取决于字体设计、回退链、设备能力三者之间的咬合程度。很多项目卡在第三步——以为加了就完了，结果上线才发现 iPhone 上还是闪得厉害。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
