font-display

定义

font-display 是 @font-face 规则中的描述符，用于指定自定义 Web 字体在下载完成前后，浏览器应如何显示对应文本，核心是权衡「文本不可见」（FOIT）与「字体切换闪烁」（FOUT）。

取值

• auto：由浏览器决定，多数引擎近似 block；
• block：短暂隐藏文本（约 3 秒阻塞期）等待字体，超时用后备字体；
• swap：立即用后备字体显示，字体就绪后无限期替换；
• fallback：极短阻塞期加有限替换期，超时则放弃本次替换；
• optional：几乎不阻塞，网络差时可直接放弃使用该字体。

选择建议

正文类文本普遍推荐 swap 保证内容尽快可读；对品牌标题可用 fallback 减少突兀替换；optional 适合锦上添花的字体。字体替换引起的布局跳动可通过 size-adjust 等描述符调校后备字体度量来缓解。

背景

在该描述符标准化之前，控制字体加载行为需依赖 Font Loading API 脚本方案，font-display 将其简化为一行声明。