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：<link rel="preload" href="harmony.woff2" as="font" type="font/woff2" crossorigin>
验证是否生效的小技巧
在 Chrome DevTools 的 Application → Fonts 面板里，能看到每个字体的“Display”状态；也可在 Network 面板禁用缓存、刷新页面，观察文字是否从系统字体平滑切换为目标字体——没有跳变，就说明 swap 生效了。
不复杂但容易忽略。
