优先使用 fallback 或 optional 策略，font-display 能有效减少 FOIT 与 FOUT；结合预加载、WOFF2 格式和字体子集，可提升字体加载速度与视觉稳定性，改善用户体验。
在HTML5与现代网页设计中，字体渲染的优化直接影响页面加载速度和视觉体验。合理使用 font-display 属性是关键手段之一，它控制自定义字体在下载完成前后的显示行为，避免文本长时间空白或布局跳动。
理解 font-display 的作用
font-display 是 @font-face 规则中的一个描述符，用于定义字体加载期间和之后的渲染策略。它能显著改善用户体验，尤其是在网络较慢时。通过设置该属性，你可以控制浏览器是否立即显示备用字体、等待自定义字体加载，或在一定时间内切换。
常见取值包括：- swap：立即使用备用字体，加载完成后切换为自定义字体（可能引起重排）
- block：短时间隐藏文本（约3秒），等待字体加载，避免突然换字
- fallback：平衡策略，极短等待后使用备用字体，加载完再替换
- optional：类似 fallback，但由浏览器决定是否使用自定义字体（适合非关键字体）
- auto：使用浏览器默认行为（通常等同于 block）
推荐设置：优先使用 fallback 或 optional
对于大多数内容型网站，建议将 font-display 设为 fallback 或 optional，以兼顾性能与可读性。
例如，在CSS中这样定义：
立即学习“前端免费学习笔记（深入）”；
@font-face {
font-family: 'CustomFont';
src: url('custom-font.woff2') format('woff2');
font-display: fallback;
}
这样用户能快速看到文字，且字体替换过程不会太突兀。若字体非核心品牌元素，optional 更佳，允许浏览器根据网络状况动态决策。
结合预加载与字体子集提升效果
仅设置 font-display 不足以全面优化。应配合以下做法：
- 对关键字体使用 link rel="preload" 加速加载
- 使用 WOFF2 格式，压缩体积
- 生成字体子集（如仅包含常用汉字或字母），减少传输量
- 设置合理的 font-weight 和 font-style 范围，避免加载多余变体
基本上就这些。正确配置 font-display 能有效减少FOIT（Flash of Invisible Text）和FOUT（Flash of Unstyled Text），让页面更流畅。关键是根据字体用途选择合适策略，不盲目追求“必须显示自定义字体”。
