字体加载策略决定文本闪烁形式
别名: font-display · 字体预加载 · FOIT · FOUT
概念解释
网页字体不会和 HTML 同时就绪。在这段空档里，引擎按你选的加载策略决定文本怎么亮出来：先空白再出字、先用回退字体再换成网页字体、或超时后不再换。策略是 font-display、预加载、unicode-range 的请求节奏、以及是否把字体放进关键路径的组合。闪烁形式是策略的输出，不是事后再挑的视觉口味。FOIT（不可见文本闪烁）和 FOUT（无样式文本闪烁）是两种已经被策略选定的显现方式，各自对应不同的时序，而不是等字体到了再决定“更想要哪一种”。
机制
文本节点在 DOM 和 CSSOM 齐了之后就可以参与布局。字形从哪套字体来，取决于 @font-face 是否已经进入可用状态。font-display: block 在阻塞期内不画字形，首屏像缺字，超时后才画——这是 FOIT 这条时序。swap 立刻用回退字体画，网页字体到达再替换——这是 FOUT 这条时序。optional 只在字体已缓存或极短窗口内使用网页字体，否则维持回退，可能根本不发生第二次绘制。preload 把网页字体的竞赛起点提前，缩短空档，但不取消策略本身指定的显现规则。unicode-range 让不同码位走不同文件，拉丁先到、汉字后到时，同一段里会按码位分时换字。
所以看见的闪烁形式，是策略把“何时画、用哪套字体画、画几次”编排出来的结果。改策略就是改形式；把同一策略拖得更久，只会把同一种形式拉长，不会变成另一种。
边界
系统 UI 字体、用户已安装的同名字体，没有网上下载空档，策略没有闪烁可决定。打印和生成 PDF 通常等字体齐套再出页，屏幕上的闪烁时序用不上。图标若走 SVG 或内联路径，不经过文本字体加载。邮件客户端和部分 WebView 忽略 font-display，策略在这些壳里失效。离线且字体已在缓存时，空档为零，任何策略看起来都像“没有闪烁”。
怎么落地
- 先写明这条文本在空档里允许哪一种显现：阻塞、立即回退、或可选字体；再选对应的
font-display，不要让浏览器默认值悄悄决定。 - 为首屏标题和正文分别设策略：标题可预加载以缩短空档，长文避免整包阻塞。
- 用
unicode-range拆文件时，确认先到的子集覆盖首屏实际字符，避免首屏先 FOIT 再在汉字位上二次换字。 - 验证：禁用缓存冷加载，录下文本从第一帧到稳定字形的过程，对照所写策略——该空白的阶段是否空白、该立刻出回退字的阶段是否已出字。形式与策略不一致，就是策略没生效。