字体导致的白屏和闪烁（FOIT/FOUT）是最伤体感的慢：页面明明加载完了，字就是不出来。三行代码 + 两个习惯，彻底解决。
中文站尤其要注意：中文字体动辄几 MB，不处理必白屏。
核心结论
- ✓font-display:swap 是底线，先系统字体顶上
- ✓只加载用到的字重，中文做子集化
- ✓主字体 preload，其他按需
- ✓兜底字体栈调好，swap 时不跳动
三行代码
@font-face {
font-family: "Brand";
src: url("/fonts/brand.woff2") format("woff2");
font-display: swap;
}预加载主字体
<link rel="preload" href="/fonts/brand.woff2" as="font" type="font/woff2" crossorigin>中文站专项
- ·标题用定制字体 + unicode-range 子集化，只含常用字
- ·正文优先系统字体栈，细节差异用户无感
- ·字重只留 400/700，300/500 按需再加
兜底栈
swap 瞬间的字体 fallback 决定了是否“闪”：挑 x-height 接近的系统字体，行高固定，跳动几乎不可见。
上线前检查清单
- 01是否有 font-display:swap
- 02主字体是否 preload
- 03字重是否 ≤2 个
- 04中文是否子集化
- 05兜底栈是否调过行高
常见问题
swap 会导致闪烁吗？
会换一次字形，但比白屏好得多；调好兜底栈后几乎无感。
图标字体还用吗？
新项目用 SVG，图标字体体积大还阻塞，别用了。
Google Fonts 直连慢？
国内自托管 woff2，或走 CDN 代理，别裸连。