CSS font-display:swap解决移动端字体闪烁(FOIT)

移动端页面加载时，文字区域先是一片空白，然后突然闪现——这个恼人的现象，就是FOIT（字体未加载时的文本隐藏）。解决它最直接的办法，就是给字体加上 font-display: swap。但别以为加上这个属性就万事大吉了。如果配套的格式声明、预加载策略和后备字体链没处理好，页面照样可能出现白屏，或者从一种闪烁（FOIT）变成另一种闪烁（文字跳动）。

font-display: swap 必须写在 @font-face 里，且 format() 不能漏

很多开发者反馈，明明写了 font-display: swap 却看不到效果，浏览器似乎“无视”了这条指令。问题通常出在细节上：

• 格式声明缺失：在 @font-face 的 src 属性里，如果只写了 url("Inter.woff2") 而漏掉了 format("woff2")，一些旧版本的Safari或Edge浏览器会直接忽略这条规则，字体加载行为会回退到默认的 auto 模式，导致渲染阻塞。
• 路径协议问题：使用相对路径（如 url(./fonts/Inter.woff2)）在本地 file:// 协议或某些特定WebView环境下可能导致404，致使整个 @font-face 声明失效。
• 引入方式不当：通过 @import 来引入包含字体声明的CSS文件，会延迟CSS的解析，进而影响预加载机制，让 swap 的效果大打折扣。

正确的写法应该是这样的：

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter.woff2") format("woff2");
  font-display: swap;
}

preload 关键字体必须带 crossorigin 和 as="font"

font-display: swap 只管“怎么显示”，可管不了“什么时候开始下载”。如果没有预加载（preload），swap所依赖的那个“交换窗口期”在弱网环境下可能长达一两秒，体验依然糟糕。但预加载配置错了，等于没配：

• 必须声明 crossorigin：这是关键。字体资源通常受CORS策略限制，预加载时必须加上 crossorigin 属性（即使是同源），否则浏览器不会真正发起预加载请求。
• 类型声明要完整：as="font" 和 type="font/woff2" 两者缺一不可。这能告诉浏览器这是一个字体文件，从而分配更高的加载优先级。如果缺失，它可能被当作普通资源处理。
• 预加载要有重点：别把所有字体都预加载。图标字体、用于小字注释的次要字体，其优化收益很低，反而可能挤占宝贵的HTTP/2连接数，影响其他关键资源的加载。

一个标准的预加载标签应该这样写：

fallback 字体链要同类型、度量接近，否则 FOUT 变成“文字跳动”

启用了 swap 之后，如果发现文字加载时不是平滑出现，而是“跳动”了一下，这未必是bug。其根源在于，后备字体（fallback font）和最终加载的Web字体在关键度量值上差异过大，比如字体的x高度（x-height）、字宽、行高都不一样，导致文本渲染区域尺寸突变，触发了布局偏移（CLS）。

解决之道不在于换方案，而在于配好后备链：

• 坚持同类型原则：后备字体链里的所有字体，类型应该尽量一致。例如，"Inter", "system-ui", -apple-system, "Segoe UI", sans-serif 就全部是无衬线字体。
• 避免类型混搭：像 "Georgia", "Inter" 这样的组合（衬线体 vs 无衬线体）就要尽量避免，两者的字宽差异可能超过20%，跳动会非常明显。
• 中文字体需明确指定：对于中文字体，不能简单地依赖英文字体的后备链。必须根据目标用户的操作系统，清晰地指定后备顺序，例如："PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif。
• 利用新特性微调：Chrome 125+ 版本支持 size-adjust、ascent-override 等属性，可以手动调整后备字体的度量值以对齐基线，但这通常需要配合 font-optical-sizing: none 使用。

swap 不是万能解，移动端中文字体要额外处理

对于动辄2-5MB的中文字体文件，swap 确实能避免长时间白屏，但随之而来的FOUT（字体加载后的文本闪烁）可能会更持久、更明显。这时候，光靠CSS属性就不够了，需要组合拳：

• 首屏文字子集化：这是最有效的手段。使用 pyftsubset 等工具或在线服务，将首屏必须显示的汉字提取出来，生成一个体积可控（建议≤200KB）的子集字体文件。
• 针对性预加载与布局锁定：对这个子集字体进行预加载。同时，为标题等关键文本元素显式设置 font-size、line-height 甚至 height，提前锁定它们在页面中的布局空间，避免文字加载时发生跳动。
• 考虑更激进的降级策略：对于非关键字体，可以考虑使用 font-display: optional。它更加激进，如果字体在极短时间内没有加载完成，浏览器将直接使用后备字体并在此次页面会话中不再交换。但需要注意，iOS Safari 16.3及以下版本不支持 optional，可以通过 @supports (font-display: swap) 进行特性检测来实现渐进增强。

说到底，真正决定移动端字体加载体验的，往往不是有没有写 swap，而是后备字体是否选得“像”、预加载指令是否真正“生效”、以及中文字体有没有做过“瘦身”——这三个环节漏掉任何一个，用户都可能在等待白屏或者观看文字“蹦迪”。