17370845950

font-display 是纯 CSS 解决 FOIT/FOUT 的方案，常用值为 swap（备用字体先显，加载完切换）、optional（100ms 内未加载则弃用）和 auto（浏览器自定，不推荐）；需写在 @font-face 内 src 后，配合 woff2、子集、preload 可进一步优化。

字体加载前文字闪动（FOIT/FOUT）本质是浏览器对自定义字体的默认行为导致的。用 font-display 可以明确告诉浏览器：字体还没好时，文字该怎么显示——不靠 JavaScript 或 hack，纯 CSS 就能解决。

font-display 的取值和实际效果

它有 5 个可选值，常用的是下面三个：

• auto：浏览器决定（Chrome 默认 FOIT，Firefox 默认 FOUT），行为不可控，不推荐
• swap：立即用备用字体显示，等自定义字体加载完再切换——最常用，兼顾可用性与最终效果
• optional：只在字体能快速加载时才用（通常 100ms 内），否则全程用备用字体——适合性能敏感场景，比如首屏不强依赖特定字形

如何正确写 @font-face 配置

必须把 font-display 写在 @font-face 规则里，且放在 src 后面才生效：

@font-face {
  font-family: 'HarmonyOS Sans';
  src: url('harmony.woff2') format('woff2');
  font-display: swap; /* 关键：放这里 */
  font-weight: 400;
}

注意：不能写在外部 CSS 类或 style 标签里，也不支持通过 JS 动态设置。

搭配 font-face 加载优化更稳妥

单靠 font-display: swap 能消除闪动，但若字体文件大、网络差，用户可能长时间看到备用字体。建议配合：

• 优先用 woff2 格式（压缩率高，现代浏览器全支持）
• 按需加载字体子集（如只引中文常用字、英文 ASCII 字符）
• 关键字体资源加 preload：
  

验证是否生效的小技巧

在 Chrome DevTools 的 Application → Fonts 面板里，能看到每个字体的“Display”状态；也可在 Network 面板禁用缓存、刷新页面，观察文字是否从系统字体平滑切换为目标字体——没有跳变，就说明 swap 生效了。

不复杂但容易忽略。