使用 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 是最佳选择。它允许系统字体快速显示内容，同时在自定义字体加载完成后平滑替换，既保证可读性，又减少明显闪烁。

这样设置后，浏览器会在 100ms 内使用备用字体显示文本，如果自定义字体在 3s 内加载完成，就替换上去，否则继续使用备用字体。

配合预加载进一步优化

为了更快加载关键字体，可以结合 提前加载字体文件：

注意必须加上 crossorigin 属性，否则字体不会被正确应用，甚至引发 CORS 错误。

总结建议

要减少 @font-face 字体加载导致的闪烁：

• 优先使用 font-display: fallback，平衡体验与性能。
• 对核心字体使用 preload 加速加载。
• 提供合适 font-family 回退链，确保样式过渡自然。
• 测试不同网络环境下表现，避免长时间空白或跳变。

基本上就这些，不复杂但容易忽略。合理配置 font-display 能显著提升字体加载体验。