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

概述 网络字体常导致首屏闪烁（FOUT）或不可见文本（FOIT）。通过 `font-display` 与 Font Loading API 可控制回退/替换时机并按需加载，提升 UX 与性能。 用法与示例 ```css @font-face { font-family: 'Inter'; src: url('/fonts/Inter.woff2') format('woff2'); font-display: swap; /* 或 optional/block/fallback */ } ``` ```js // 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