Web 字体优化：font-display、子集化与可变字体（Variable Fonts）实践

Web 字体优化：font-display、子集化与可变字体（Variable Fonts）实践技术背景Web 字体常导致首屏阻塞与闪烁（FOIT/FOUT）。通过合理的 `font-display`、预加载与子集化，以及引入可变字体降低多字重体积，可显著优化渲染与加载性能。核心内容字体声明与显示策略@font-face {

font-family: 'Inter';

src: url('/fonts/Inter-roman.var.woff2') format('woff2');

font-weight: 100 900; /* 可变字体范围 */

font-style: normal;

font-display: swap; /* 避免 FOIT */

}

body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }

关键字体预加载与优先级<link rel="preload" href="/fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin fetchpriority="high">

字体子集化与多语言策略（思路）- 生成常用字符子集（基础拉丁/数字/标点），根据语言按需加载扩展子集

- 根据 `lang` 与内容动态选择子集，降低首次字节

技术验证参数在 Chrome 128/Edge 130（真实页面）：首屏渲染阻塞（FOIT）事件：下降 ≥ 90%字体总字节：下降 30–60%LCP：下降 10–25%应用场景多字重/多语言站点与设计系统电商与内容站点的文本密集页面最佳实践`font-display: swap` 或 `optional`，避免 FOIT关键字体预加载并设置高优先级子集化与可变字体结合，减少多字重开销