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`，用于触发轻量视觉过渡或布局稳定设置。