CSS 字体加载控制：font-display 与 Font Loading API 实战

---

title: CSS 字体加载控制：font-display 与 Font Loading API 实战

keywords:

• font-display
• FontFaceSet
• FontFace
• FOIT
• FOUT

description: 介绍 @font-face 的 font-display 策略与 Font Loading API 的编程控制，减少 FOIT/FOUT

干扰并优化首屏体验，提供示例与兼容建议。

categories:

• 文章资讯
• 技术教程

---

概述

网络字体常导致首屏闪烁（FOUT）或不可见文本（FOIT）。通过 font-display 与 Font Loading API 可控制回退/替换时机并按需加载，提升 UX 与性能。

用法与示例

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter.woff2') format('woff2');
  font-display: swap; /* 或 optional/block/fallback */
}

// Font Loading API：检测与按需加载
await document.fonts.load('1em Inter')
document.documentElement.classList.add('fonts-loaded')

工程建议

• 策略选择：首屏正文使用 swap/optional；品牌标题可 fallback 控制窗口。
• 预加载与缓存：对关键字体 preload 并设置 crossorigin 与 MIME；CDN 缓存合理。
• 兼容：不支持 Font Loading 的环境保持 CSS 回退；避免过度阻塞渲染。

参考与验证

• MDN @font-face 与 font-display：https://developer.mozilla.org/docs/Web/CSS/@font-face
• MDN Font Loading API：https://developer.mozilla.org/docs/Web/API/CSS_Font_Loading_API
• web.dev 字体加载指南：https://web.dev/articles/font-best-practices