要通过 HTML 的 CSS font-display: swap 在字体加载期间显示后备字体，可以按照以下步骤进行设置：1. 使用 @font-face 定义自定义字体在 CSS 中，首先通过 @font-face 引入自定义字体，并设置 font-display: swap。@font-face { font-family: 'MyCustomFont'; src: url('myfo

本文深入解析了如何正确使用 CSS 的 `font-display: swap` 实现平滑字体加载体验，强调它必须严格写在 `@font-face` 规则内（而非选择器中），且每个字重和样式变体都需单独声明；同时指出仅靠 `swap` 并不能解决全部问题——若后备字体与自定义字体的 metrics（如 x-height、字宽）差异过大，会导致恼人的文字跳动（FOUT），因此推荐使用系统字体栈并配合 `font-size-adjust` 缓解；此外，预加载（带 `crossorigin` 和正确 `as="font"`）与 `document.fonts.ready` 的主动检测缺一不可，否则在弱网或异常场景下，“立即显示”将沦为理论，甚至引发更隐蔽的渲染问题。

font-display: swap 必须写在 @font-face 里才生效

单独给 .title 或 body 加 font-display: swap 完全无效——它只作用于 @font-face 规则本身。漏掉这一步，浏览器照旧按默认的 block 行为处理：文字区域空白约 3 秒（FOIT），尤其在 Chrome 中非常明显。

正确写法是每个字体变体都显式声明：

@font-face {
  font-family: 'Inter';
  src: url('inter-var-latin.woff2') format('woff2');
  font-display: swap;
}

• 如果用了 Regular、Bold、Italic 多个文件，每个 @font-face 都要加 font-display: swap
• 漏写 format("woff2") 或写成 format("woff")，部分浏览器会忽略整个规则，font-display 也跟着失效
• Google Fonts 链接必须手动加上 &display=swap 参数，否则返回的 CSS 里仍是 font-display: auto

后备字体选错会导致文字跳动（FOUT）比空白还难受

font-display: swap 解决的是“要不要等”，但换字体时是否跳动，取决于后备字体和 Web 字体的 metrics（字宽、x-height、行高）是否接近。用 "Times New Roman" 当 "Inter" 的 fallback，大概率出现段落重排。

• 优先选系统字体栈：font-family: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
• 避免跨类型混搭：衬线体配无衬线体、等宽体配比例字体，metrics 差异天然大
• 对关键文本容器加 font-size-adjust: 0.5;（需配合 font-family 中第一个字体支持该属性）可锁定 ex 高度比例，大幅缓解跳动

不预加载，swap 的“立即显示”就只是理论上的

移动端弱网下，swap 常表现为：文字先用系统字体正常显示 → 滚动半屏后突然上移/下移一帧 → 才稳定。这不是 bug，是字体文件还没下载完就被替换了。

• 必须在 最前面加预加载：
• crossorigin 缺失会导致预加载静默失败，尤其用 CDN 时
• 不要用 as="style" 或漏掉 as 属性，否则降级为普通 fetch，失去高优先级
• WOFF2 格式必须优先；TTF/OTF 在 iOS 上解析慢，会拉长 swap 窗口

document.fonts.ready 不是可选项，而是兜底判断依据

font-display: swap 只控制渲染时机，不保证字体“真正可用”。比如字体文件损坏、404、或 CORS 阻止加载，swap 仍会触发替换，但实际没换成功，导致文字模糊或回退到更远的 fallback。

• 用 document.fonts.load("1em Inter") 主动触发加载，并监听 document.fonts.ready Promise
• 监听失败时可降级处理，比如加 class 切换备用样式，或上报字体加载异常
• 本地开发必须走 http:// 服务，file:// 协议下 document.fonts API 直接不可用

真实场景中，最常被忽略的是 metrics 对齐和预加载的 crossorigin。这两个点不处理，font-display: swap 就只是把 FOIT 换成更难调试的 FOUT。

理论要掌握，实操不能落！以上关于《要通过 HTML 的 CSS font-display: swap 在字体加载期间显示后备字体，可以按照以下步骤进行设置：1. 使用 @font-face 定义自定义字体在 CSS 中，首先通过 @font-face 引入自定义字体，并设置 font-display: swap。@font-face { font-family: 'MyCustomFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; /* 关键属性 */ }2. 设置默认字体作为后备字体在需要使用自定义字体的元素中，指定一个或多个后备字体。这些字体会在自定义字体加载完成前显示。body { font-family: 'MyCustomFont', Arial, sans-serif; }3. HTML 结构（可选）确保页面中有内容需要应用自定义字体：

这是一段使用自定义字体的文本。

4. 解释 font-display: swap 的作用swap：在字体加载期间，先使用后备字体显示文本，等字体加载完成后，再切换为自定义字体。这种方式可以》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！