使用 font-display: fallback 可减少字体闪烁，它在100ms内显示系统字体，3s内加载完成则平滑替换，否则继续使用备用字体，结合 preload 和回退链可进一步优化加载体验。
使用 @font-face 加载自定义字体时，页面在字体未加载完成前可能会先显示系统默认字体（如 serif 或 sans-serif），等自定义字体加载完成后突然切换，造成“字体闪烁”现象（也称为 FOUT：Flash of Unstyled Text）。通过设置 font-display 可以有效控制这一行为，减少或优化闪烁。
font-display 的作用
font-display 是 @font-face 中的一个描述符，用于定义字体的加载行为和渲染策略。它决定了浏览器在字体尚未加载完成时如何展示文本内容，从而影响用户体验。
常用的 font-display 值包括：
- auto：使用浏览器默认策略，通常会短暂隐藏文字（FOIT）或等待字体加载。
- block：短时间内隐藏文字（约 3s），避免闪烁，但可能导致空白文本。
- swap：立即用系统字体显示，加载完成后替换，即 FOUT，有闪烁但用户可见内容。
- fallback：快速切换窗口，平衡加载与显示，推荐用于大多数网页。
- optional：类似 fallback，但是否使用自定义字体由浏览器决定（网络差时可能直接不用）。
推荐设置：使用 fallback 减少闪烁
对于大多数网站，font-display: fallback 是最佳选择。它允许系统字体快速显示内容，同时在自定义字体加载完成后平滑替换，既保证可读性，又减少明显闪烁。
立即学习“前端免费学习笔记（深入）”；
@font-face {
font-family: 'MyCustomFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
font-display: fallback;
}
这样设置后，浏览器会在 100ms 内使用备用字体显示文本，如果自定义字体在 3s 内加载完成，就替换上去，否则继续使用备用字体。
配合预加载进一步优化
为了更快加载关键字体，可以结合 <link rel="preload"> 提前加载字体文件：
注意必须加上 crossorigin 属性，否则字体不会被正确应用，甚至引发 CORS 错误。
总结建议
要减少 @font-face 字体加载导致的闪烁：
- 优先使用
font-display: fallback，平衡体验与性能。 - 对核心字体使用
preload加速加载。 - 提供合适
font-family回退链，确保样式过渡自然。 - 测试不同网络环境下表现，避免长时间空白或跳变。
基本上就这些，不复杂但容易忽略。合理配置 font-display 能显著提升字体加载体验。
