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

正文字体加载的闪烁与占位变化会直接影响感知性能与 CLS。本文以标准 Font Loading API 实现就绪态切换与预加载，降低 FOUT/FOPA 干扰。一、预加载与字体声明<link rel="preload" as="font" href="/fonts/Inter-Variable.woff2" type="font/woff2" crossorigin> @font-face { font-family: 'Inter'; src: url('/fonts/Inter-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } html { font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Inter', sans-serif } .fonts-ready body { transition: opacity .2s ease } 二、就绪态切换与缓存'use client' import { useEffect } from 'react' export default function FontsBoot() { useEffect(() => { const ready = () => document.documentElement.classList.add('fonts-ready') if (document.fonts && document.fonts.ready) { document.fonts.ready.then(ready) } else { ready() } }, []) return null } 三、治理要点`font-display: swap`：优先展示系统字体，待自定义字体可用后替换，减少空白闪烁。预加载：使用 `preload` 提前下载关键字体；与跨域字体需 `crossorigin`。就绪态 class：字体就绪后切换 `.fonts-ready`，用于触发轻量视觉过渡或布局稳定设置。