font-display: swap; 这个有什么用？

font-display: swap; 是一种用于控制网页字体加载行为的 CSS 属性，它被用在 @font-face 规则中。其主要作用是提升网页字体的可访问性和加载性能。

功能

1. 改善首次渲染：

   • 当浏览器加载自定义字体时，如果字体加载较慢，默认情况下浏览器会等待字体加载完成后再渲染文本（导致文字不可见的“闪烁”现象，FOIT：Flash of Invisible Text）。
   • 使用 font-display: swap; 时，浏览器会先用系统默认字体渲染文本，等自定义字体加载完成后再进行字体替换。

2. 提升用户体验：

   • 即使自定义字体加载失败，用户也能看到内容，而不会看到空白区域。

工作流程

设置了 font-display: swap; 后，浏览器按以下流程处理字体加载：
1. 优先渲染默认字体：
- 如果自定义字体尚未加载，浏览器会立即用默认字体显示内容。
2. 替换为目标字体：
- 自定义字体加载完成后，替换掉系统字体。
3. 超时策略：
- 如果目标字体未能及时加载（通常在 3 秒内），浏览器会放弃替换，继续使用系统字体。

使用方法

@font-face {
  font-family: 'MyCustomFont';
  src: url('my-custom-font.woff2') format('woff2');
  font-display: swap;
}

优点

• 避免文字不可见的问题（FOIT）。
• 提高页面加载性能和用户体验。
• 符合 SEO 要求，确保内容快速可见。

缺点

• 当字体替换时，可能会导致页面布局轻微跳动（FOUT：Flash of Unstyled Text）。

适用场景

适用于任何需要使用自定义字体的网站，特别是对内容可见性和加载性能有高要求的项目，比如：
- 新闻类网站
- 电子商务平台
- 博客

总结：font-display: swap; 是现代网页设计中的推荐实践，尤其是希望在字体加载和用户体验之间找到平衡时。