用 font-display: swap 可避免 FOIT/FOUT 闪动，配合字体子集、同域托管、preload 关键字体及 fallback 字体度量对齐，能有效消除文字闪动与布局偏移。
font-face 加载阻塞渲染，怎么避免文字闪动（FOIT/FOUT）
默认情况下，@font-face 会触发字体下载并阻塞文本渲染，直到字体加载完成或超时（通常 3s），期间可能显示空白（FOIT）或回退字体（FOUT）。这不是“慢”，而是浏览器的默认策略——你得主动干预。
- 用
font-display: swap是最直接解法：让浏览器立即用系统字体渲染，等自定义字体就绪后无感替换 - 不要只写
font-display: auto（默认值），它在 Chrome/Firefox 中仍倾向 FOIT - 慎用
block（延长阻塞期）和optional（可能完全不加载字体），后者对品牌字体不友好
@font-face {
font-family: "MyFont";
src: url("myfont.woff2") format("woff2");
font-display: swap;
}
woff2 文件还是大？检查压缩与子集是否生效
一个未优化的 .woff2 文件可能 >200KB；实际中文项目里，全量思源黑体甚至超 10MB。体积大 ≠ 服务器慢，而是传了不该传的字形。
- 英文项目优先用
unicode-range拆分字体文件（如只加载 ASCII + 常用标点） - 中文必须做子集：用
pyftsubset（fonttools）或在线工具（如 font-spider、transfonter）按 HTML 中真实出现的字符生成精简版 - 确认构建流程中没把原始 TTF 直接转成 WOFF2——先子集，再转码，顺序错了白忙
- Webpack/Vite 用户注意：
url-loader或asset/inline会把字体转 Base64 写进 CSS，增大 CSS 体积并失去缓存优势，应禁用
字体请求没走 HTTP/2 多路复用？检查域名与 preload 配置
如果字体文件和主资源跨域（比如从 fonts.example.com 加载），而该域名没开 HTTP/2，多个字体文件会串行请求，拖慢整体加载。
- 把字体和 HTML 放同一域名下（如
/fonts/），确保复用已有 HTTPS 连接 - 在
中用<link rel="preload" as="font">提前触发字体请求（注意加crossorigin属性，否则字体加载会失败） - 示例：
<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>
- 别对所有字体都
preload：只预加载首屏关键字体（如标题用的 Bold），正文 Regular 可 lazyload
字体加载完成后的重排问题：避免 layout shift
用 swap 虽然消除了 FOIT，但如果自定义字体比回退字体宽/高很多，替换瞬间会引发文字重排（layout shift），影响 CLS 指标。
立即学习“前端免费学习笔记（深入）”；
- 用
size-adjust+descender-override等可变字体特性做度量对齐（仅支持较新浏览器） - 更通用做法：通过
font-weight和font-stretch组合，选一个视觉高度接近的系统字体作 fallback（如用system-ui替代Helvetica） - 关键样式上加
font-size-adjust: 0.5;（实验性，但能缓解部分失真） - 真正稳定的方案是控制字体本身：导出时统一 baseline、调整 ascender/descender，这一步常被前端忽略
