使用 font-display: swap 可解决自定义字体被系统字体替代的问题，确保文本立即显示并平滑切换。
页面中使用 @font-face 加载自定义字体时，有时会发现字体被系统默认字体替代，导致样式异常。这通常是因为浏览器在等待自定义字体加载期间，为避免内容不可见（FOIT，Flash of Invisible Text），临时用系统字体渲染文本。可以通过 font-display 控制这一行为，优化字体加载体验。
问题原因：字体加载阻塞与替换
现代浏览器默认对 @font-face 字体使用 font-display: block 或类似策略，意味着：
- 字体加载期间，文本暂时不可见（或使用备用字体）
- 若网络慢或字体资源失败，可能长时间显示系统字体
- 用户感知为“字体闪烁”或“样式跳变”
解决方案：使用 font-display 指定渲染策略
在 @font-face 规则中设置 font-display，可控制字体加载期间的渲染行为。常用取值包括：
- swap：立即使用备用字体显示文本，加载完成后切换到自定义字体（FOUT，Flash of Unstyled Text）
- fallback：短时间等待自定义字体，否则使用系统字体，后续不切换
- optional：由浏览器决定是否使用自定义字体，弱网环境下可能直接跳过
- auto：使用浏览器默认策略（通常是 block）
推荐做法：使用 swap 实现平滑过渡
对于大多数网页，推荐使用 swap 策略，保证内容快速可见：
立即学习“前端免费学习笔记（深入）”；
@font-face {
font-family: 'CustomFont';
src: url('custom-font.woff2') format('woff2'),
url('custom-font.woff') format('woff');
font-display: swap;
}
这样设置后：
- 页面立即用系统字体渲染文字
- 自定义字体加载完成后自动替换，视觉变化较自然
- 避免长时间空白或布局偏移
补充建议
为提升整体字体加载体验，还可结合以下措施：
- 优先提供 WOFF2 格式，减小文件体积
- 使用
font-weight和font-style明确声明变体，避免浏览器伪造 - 考虑使用
preload提前加载关键字体 - 搭配
content-visibility或懒加载非首屏文本
基本上就这些。合理设置 font-display 能有效防止自定义字体被系统字体“永久”替代，同时提升页面可用性。
