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

概述网络字体常导致首屏闪烁（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-faceMDN Font Loading API：https://developer.mozilla.org/docs/Web/API/CSS_Font_Loading_APIweb.dev 字体加载指南：https://web.dev/articles/font-best-practices