font-display swap 解决字体加载文字闪烁

预加载能保证字体在渲染早期就开始下载，使得 swap 的交换过程几乎瞬间完成，用户很难察觉到闪烁。

注意事项与常见问题

1. 后备字体的选择与匹配

由于 swap 阶段会先用系统字体显示，选择合理的 font-family 后备栈至关重要。尽量让后备字体的 x 高度、字宽与目标字体接近，以降低文本布局偏移（CLS）量。例如：

body {
  font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

2. 可能产生的布局偏移

即使 swap 消除了文字隐藏，从后备字体切换到自定义字体仍可能导致文字重排。为了减少视觉跳动，可以使用以下技巧：

• 通过 size-adjust（@font-face 中的属性）微调后备字体的度量，使其与自定义字体尽可能匹配。
• 使用 font-style-matcher 类工具预计算合适的调整值。

3. 什么场景下不适合用 swap？

如果自定义字体是你的品牌标识核心（如 logo 文字、特定艺术字体），且 FOIT 更符合设计预期，那么 swap 可能不是最佳选择。此时 block 或 optional 或许更合适，但务必评估其对性能的影响。

4. 浏览器兼容性

font-display 属性在所有现代浏览器中都得到良好支持，包括 Chrome、Firefox、Safari、Edge，以及移动端浏览器。对于不支持的旧浏览器，它会回退到默认行为，因此可以放心使用。

进阶优化：结合 font-face 描述符

除了 swap，CSS 还提供了 font-display 与其他 @font-face 描述符的组合拳，进一步优化文字渲染。

利用 unicode-range 分块加载

如果只用自定义字体呈现特定字符集（如拉丁字母），可以通过 unicode-range 限制字体应用范围。这样浏览器只会为需要的字符下载字体，其余文字直接用后备字体，整体加载速度更快，swap 的交换也更早触发：

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/MyFont-Latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-display: swap;
}