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`；使用系统字体作为稳健回退。测试清单弱网与缓存命中：字体加载是否稳定、无明显跳变；占位与真实字体对齐。