HTML字体加载优化：font-display使用教程

想彻底告别网页字体加载时的闪屏（FOIT/FOUT）和文字跳动？关键不在是否启用font-display，而在于精准选择其值：fallback最防闪屏但可能永不启用自定义字体，swap适合正文却在弱网下暴露替换动画，optional专为装饰性字体设计，而默认auto则会强制阻塞渲染长达3秒——本文手把手教你针对Google Fonts链接手动添加&display=swap或&display=fallback，以及在本地@font-face中为每个字重、每个格式（woff2/woff）单独声明font-display，并深入剖析为何设了swap仍会闪动：CSS加载时机、字体体积、度量差异、容器预留不足等隐藏陷阱一个都不能忽视。

font-display 属性怎么设才不闪屏

字体加载时页面先用系统字体渲染，等自定义字体就绪再重绘，这个“重绘”就是用户看到的闪屏（FOIT 或 FOUT）。关键不是加不加 font-display，而是选对值：swap 最常用，但不是万能解药。

• font-display: swap：立即显示备用字体，等 Web 字体加载完成立刻替换——适合正文，但动画式替换在弱网下明显；
• font-display: fallback：只给 100ms 的“字体等待窗口”，超时就用备用字体，之后即使字体加载完也不替换——防闪屏最稳，但可能永远不用上你的 Web 字体；
• font-display: optional：浏览器决定是否加载，移动端常直接跳过——适合非关键字体，比如装饰性标题字；
• 别用 auto（默认值）：Chrome 会强制阻塞文本渲染长达 3s，用户看到空白段落是常态。

Google Fonts 怎么配 font-display

直接抄官方链接会漏掉 font-display 参数。Google Fonts 的 &display=swap 是必须手动加上的查询参数，否则它默认返回 font-display: auto 的 CSS。

• 正确写法：https://fonts.googleapis.com/css2?family=Inter&display=swap；
• 如果用了 @import，得自己补声明——@import 加载的 CSS 里没覆盖 font-display 就等于没设；
• 用 &display=fallback 时，注意 Google Fonts 返回的 CSS 里会带 font-display: fallback，但部分旧版 Chrome（≤97）不支持该值，会退化成 auto；
• 本地字体（@font-face）必须手写 font-display，Google Fonts 链接不帮你注入。

本地 @font-face 怎么写才可控

自己托管字体时，@font-face 块里漏掉 font-display 就等于放弃控制权。而且不同格式、不同 weight 的声明必须各自带上该属性，不能靠继承。

font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-weight: 400;
  font-display: fallback; /* 必须每套都写 */
}

• 多个 @font-face 声明（比如 400/700/italic）要分别加 font-display，缺一个就会按默认行为处理；
• woff2 和 woff 同时存在时，浏览器优先选 woff2，但 fallback 行为仍以该声明整体的 font-display 为准；
• 别信“只写一次就行”——CSS 里没有全局 font-display 设置，每个字体族、每个变体都得单独声明。

为什么开了 font-display 还有闪动

常见错觉是“设了 swap 就万事大吉”，其实闪动往往来自别的环节：字体加载时机、CSS 加载顺序、甚至 layout shift。

• CSS 文件本身加载慢，导致 @font-face 声明晚于 HTML 渲染——把字体 CSS 放到 顶部，别 defer；
• 字体文件体积过大（尤其未压缩的 woff），swap 只管“等多久”，不管“等多快”——优先用 woff2，并 subsetting 中文字符集；
• 字体加载后重排文字，但容器高度没预留（比如 line-height 按系统字体设的），造成文字跳动——用 size-adjust 或 ascent-override 微调字体度量；
• 用了 font-display: fallback 却发现字体还是加载了——检查 DevTools → Network，确认字体请求没被缓存或预加载干扰。

真正难控的是字体度量差异。哪怕 font-display 设对了，中文字体换行位置、行高变化、标点悬挂偏移这些，没法靠 CSS 属性一键对齐。得测真实设备、留白余量、接受轻微不一致。

今天关于《HTML字体加载优化：font-display使用教程》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！