Font Loading API 字体加载与 FOIT/FOUT 治理：document.fonts 与 size-adjust 实践

背景与价值字体加载不当会出现 FOIT（闪烁为不可见文本）与 FOUT（样式跳变）；治理可提升首屏稳定与阅读体验。CSS 配置：font-display 与 size-adjust@font-face {

font-family: 'Inter';

src: url('/fonts/inter.woff2') format('woff2');

font-display: swap;

size-adjust: 100%;

}

预加载与加载控制<link rel="preload" as="font" href="/fonts/inter.woff2" type="font/woff2" crossorigin>

Font Loading API 等待与降级async function ensureFonts() {

try {

await (document as any).fonts.load('1em Inter');

document.documentElement.classList.add('fonts-ready');

} catch {

document.documentElement.classList.add('fonts-fallback');

}

}

验证指标（Chrome 128/Edge 130）FOIT/FOUT 发生率：降低 ≥ 80%。CLS：字体切换导致的布局跳动 ≤ 0.02（P95）。首屏可读性：文本可见时间提升 120–240ms。回退策略不支持 Font Loading API：保留 `font-display: swap/optional`；使用系统字体作为稳健回退。测试清单弱网与缓存命中：字体加载是否稳定、无明显跳变；占位与真实字体对齐。