font-display: swap 是解决移动端 FOIT 最直接有效的手段，但需配合正确 format 声明、preload（带 crossorigin 和 as="font"）及度量一致的 fallback 字体链，中文字体还需子集化与布局锁定。
font-display: swap 是解决移动端 FOIT（文字空白）最直接有效的手段，但它不是加了就完事——不配 format、不 preload、fallback 字体链错，照样白屏或闪跳。
font-display: swap 必须写在 @font-face 里，且 format() 不能漏
很多项目写了 font-display: swap 却没效果，浏览器根本没执行它。常见原因：
-
@font-face中的src没声明format("woff2")，比如只写url("Inter.woff2")；旧版 Safari、Edge 会直接忽略该条规则，退回到默认auto行为，导致阻塞渲染 - 路径用相对地址（如
url(./fonts/Inter.woff2)），在file://协议或某些 WebView 下 404，整个@font-face失效 - 用
@import引入字体 CSS，而不是内联或加载——预加载失效，解析也延迟
正确写法示例：
@font-face {
font-family: "Inter";
src: url("/fonts/Inter.woff2") format("woff2");
font-display: swap;
}
preload 关键字体必须带 crossorigin 和 as="font"
font-display: swap 只解决“怎么显示”，不解决“什么时候开始下载”。没 preload，swap 的“窗口期”可能长达 1–2 秒（尤其弱网下）。但配置错等于白写：
- 必须加
crossorigin属性，否则字体不会被预加载（CORS 策略要求匿名请求显式声明） -
as="font"和type="font/woff2"缺一不可，否则浏览器当成普通资源，不提升优先级 - 别给所有字体都
preload——图标字体、小字号注释字体收益低，还挤占 HTTP/2 连接
正确写法示例：
<link rel="preload" href="/fonts/Inter.woff2" as="font" type="font/woff2" crossorigin>
fallback 字体链要同类型、度量接近，否则 FOUT 变成“文字跳动”
启用 swap 后看到文字“跳一下”，不是 bug，是后备字体和 Web 字体的 x-height、字宽、行高差异太大，触发了 layout shift（CLS）。关键不在换方案，而在选对 fallback：
- 优先用同类型链：比如
"Inter", "system-ui", -apple-system, "Segoe UI", sans-serif，全是无衬线 - 避免混用
"Georgia", "Inter"——衬线 vs 无衬线，字宽差常超 20% - 中文字体 fallback 要分平台写清楚：
"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif，不能只靠英文 fallback 蒙混过关 - Chrome 125+ 支持
size-adjust或ascent-override手动对齐 baseline，但需配合font-optical-sizing: none
swap 不是万能解，移动端中文字体要额外处理
中文字体文件动辄 2–5 MB，swap 能避免白屏，但 FOUT 会更明显。这时候单靠 CSS 不够：
- 首屏必需汉字做子集化（≤200 KB），用工具如
pyftsubset或在线服务生成 - 对子集字体单独
preload，并为标题等关键文本显式设置font-size/line-height/height，锁住布局 - 考虑降级策略：
font-display: optional更激进，适合非关键字体；但 iOS Safari ≤16.3 不支持 optional，建议用@supports (font-display: swap)做渐进增强
真正卡住体验的，往往不是 swap 写没写，而是 fallback 是否度量一致、preload 是否生效、中文字体是否做过子集——这些点漏一个，用户就还在等白屏或看文字跳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
