CSS中的font-display属性详解

描述：
font-display属性控制字体文件的显示策略，决定浏览器在自定义字体（通过@font-face引入）加载完成前、加载失败时如何显示文本。这个属性解决了FOIT（Flash of Invisible Text，不可见文本闪烁）和FOUT（Flash of Unstyled Text，无样式文本闪烁）问题，对网页性能和用户体验至关重要。

详细讲解：

1. 核心问题背景

• FOIT（不可见文本闪烁）：浏览器默认行为。字体加载期间，文本被隐藏（呈现空白），加载完成后才显示。这导致布局偏移和内容延迟显示。
• FOUT（无样式文本闪烁）：字体加载期间，先显示回退字体，加载完成后切换为自定义字体。这会导致字体切换时的视觉闪烁。

2. font-display的5个属性值

（1）auto（默认值）

• 行为由浏览器决定，通常是FOIT（隐藏文本直到字体加载完成或超时）。
• 不推荐使用，因为行为不可预测。

（2）block

• 字体阻塞期：字体加载期间，文本完全不可见（显示空白），持续约3秒。
• 交换期：如果3秒内字体未加载完成，则显示回退字体。字体加载完成后，再交换为自定义字体。
• 应用场景：适用于需要确保品牌字体必须显示的标志性标题，可接受短暂空白。

（3）swap

• 字体阻塞期：极短（约100毫秒），几乎立即进入交换期。
• 交换期：立即显示回退字体，自定义字体加载完成后立即替换。
• 优点：避免FOIT，内容可立即阅读。
• 缺点：可能产生FOUT（字体切换闪烁）。
• 应用场景：适用于正文文本，可读性优先。

（4）fallback

• 字体阻塞期：约100毫秒，短暂隐藏文本。
• 交换期：约3秒。如果字体在100毫秒内加载完成，立即应用；否则显示回退字体，并在3秒内等待字体加载，加载成功则替换。
• 失败期：3秒后，即使字体加载完成也不再应用，永久使用回退字体。
• 平衡策略：兼顾可读性和避免频繁字体切换。

（5）optional

• 字体阻塞期：约100毫秒。
• 交换期：无。浏览器根据网络条件（如慢速网络）自行决定是否使用自定义字体。
• 关键特点：字体加载可能被放弃，首次访问可能永远不显示自定义字体，但字体会被缓存供后续访问使用。
• 应用场景：对性能要求极高，可接受回退字体近似设计的场景。

3. 使用示例

@font-face {
  font-family: 'CustomFont';
  src: url('custom.woff2') format('woff2');
  font-display: swap; /* 推荐正文使用 */
}

@font-face {
  font-family: 'HeadingFont';
  src: url('heading.woff2') format('woff2');
  font-display: block; /* 标题可短暂等待 */
}

4. 性能优化建议

• 对关键文本（如品牌标题）使用block或swap。
• 对正文使用swap或fallback。
• 对装饰性字体使用optional。
• 配合字体预加载：<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>。

总结：font-display通过控制字体加载时间线，在用户体验、视觉一致性和性能之间提供精细化控制，是现代网页字体性能优化的核心属性。