font-display

font-display 是一个描述符，写在 @font-face 里面，决定字体文件还没下载完时这段文字怎么显示^[1]。它管的是三段周期：-block 期（用回退字体或直接不显示）、swap 期（允许用回退字体顶着）、failure 期（下载失败就固定用回退）。

五个取值

auto       由浏览器决定，各实现不同
block      短暂隐藏文字，然后用回退或自定义字体
swap       立刻用回退字体显示，字体到位后替换
fallback   极短隐藏期，再进一段有限的替换窗口，窗口过后固定回退
optional   隐藏期极短，多数情况下本次会话直接用回退

Google 的字体优化指南提到：担心文字要等字体才出现时，可以用 font-display 避免不可见文字；但 swap 可能造成明显布局偏移，影响 CLS，条件允许时优先考虑 optional 或 fallback^[2]。

与预加载配合

字体对品牌重要时可以先 preload 字体文件，让浏览器尽早发起请求^[2]。用了 font-display: swap，预加载能缩短替换周期；没写 font-display，预加载能缩短阻塞周期^[2]。

中文站点的一条经验

中文字体文件动辄几兆，阻塞期长会让首屏正文迟出。常见组合是子集化加 swap，同时给正文行高与字号定下与回退字体接近的值，把替换时的位移压到最小^[3]。

常见误用

第一种是全站统一 swap，正文与标题的度量差得多，字体一到整页跳动，LCP 与 CLS 一起变差^[2]。第二种是只写 font-display 不做子集化，用户仍要等大文件。第三种是回退字体链写空，隐藏期一过没有可用字形。

附录

参见

• Web 字体
• 字体子集
• 关键渲染路径
• CLS
• LCP
• 首屏加载

参考资料

官方（境外）

1. 《font-display》，MDN Web 文档。
2. 《缩减网页字体大小》，web.dev，Google。
3. 《Font best practices》，web.dev，Google。

外部链接

• 避免不可见文字，web.dev，Google。