CSS Font Loading API FontFaceSet 与 FOUT-FOPA 治理实践

核心价值通过脚本控制字体加载与就绪状态，减少闪变并稳定首屏文本渲染。与 `font-display`、`preload` 协同，优化关键字体的获取与替换时机。基础设置<link rel="preload" href="/fonts/app.woff2" as="font" type="font/woff2" crossOrigin="anonymous"> @font-face { font-family: 'App'; src: url('/fonts/app.woff2') format('woff2'); font-display: swap; } body { font-family: 'App', system-ui, sans-serif; } 脚本控制(async () => { if (!document.fonts) return try { await document.fonts.load('1rem App') document.documentElement.classList.add('fonts-ready') } catch {} })() .fonts-ready body { font-family: 'App', system-ui, sans-serif; } 治理建议对首屏文本使用 `swap` 或 `optional`，避免阻塞；对非关键字体可延迟加载。使用 `preload` 加快关键字体获取，注意与跨域源的 `crossorigin` 属性匹配。结论Font Loading API 与合理的 `font-display/preload` 策略可显著改善文本首次绘制体验，降低 FOUT/FOPA，提升整体可读性与稳定性。