字体加载优化需四要素协同：font-display控制渲染策略（推荐swap），preload配合as="font"和type提前加载，crossorigin确保跨域权限，WOFF2格式兼顾体积与兼容性。
字体加载阻塞渲染，@font-face 默认行为就是如此
浏览器遇到 @font-face 声明后，会把字体文件当作“关键资源”处理：在字体下载完成前，文本可能空白（FOIT）或延迟渲染（FOIT → FOUT 过渡不及时）。这不是 bug，而是规范行为——font-display 属性正是为控制这一过程而生。
-
font-display: block：短时间（100ms）内用隐藏文本替代，之后强制显示（易出现闪动） -
font-display: swap：立即用系统字体渲染，字体加载完立刻替换（最常用，FOUT 明显但体验连贯） -
font-display: fallback：极短阻塞期（100ms）+ 短回退期（3s），之后不再等待字体 - 避免使用
auto（默认值），它等同于block且不可控
preload 要配对 as="font" 和 type，否则无效
单纯在 <head> 里写 <link rel="preload" href="font.woff2"> 不起作用——浏览器无法识别这是字体，不会提前发起请求。必须显式声明类型和用途。
- 必须加
as="font"，否则预加载降级为普通fetch - 必须加
type="font/woff2"（匹配实际 MIME 类型），尤其当服务器未正确返回Content-Type时 - 只对关键字体预加载（如标题、首屏正文），非关键字体用
swap更合理 - 不要预加载多个格式（
.woff+.woff2），选一个最优格式（优先.woff2）
<link rel="preload" href="/fonts/inter-bold.woff2" as="font" type="font/woff2" crossorigin>
crossorigin 属性不能省，否则字体加载会失败
字体是跨域资源（即使同站，现代浏览器也按 CORS 处理），漏掉 crossorigin 会导致 FontFace 加载报错：Failed to decode downloaded font 或控制台静默失败。
-
crossorigin必须存在，值可为空（crossorigin）或显式写crossorigin="anonymous" - 对应服务器需返回
Access-Control-Allow-Origin: *（或具体域名） -
@font-face中的url()无需重复加crossorigin，由<link>或 CSS 加载器统一控制 - Webpack/Vite 构建中若用
url()内联字体，也要确保 loader 配置了crossOrigin选项
WOFF2 是当前最优格式，但得检查旧浏览器兜底
WOFF2 压缩率比 WOFF 高 30%+，但 IE 和老版 Safari 不支持。纯靠 @font-face 多格式声明不够，顺序和兼容性判断要到位。
立即学习“前端免费学习笔记（深入）”；
- 按支持优先级从高到低排列：先
woff2，再woff，最后ttf（不用eot，IE11 已淘汰） - 每个
@font-face块只声明一种格式，避免浏览器误判加载逻辑 - 不要依赖 JS 检测后再加载字体——这会引入额外延迟，应靠 CSS 自然降级
- 若项目仍需支持 iOS ≤ 13.3，注意其 WOFF2 支持有 bug，可加
font-display: optional缓解
@font-face {
font-family: "Inter";
src: url("/fonts/inter-bold.woff2") format("woff2"),
url("/fonts/inter-bold.woff") format("woff");
font-weight: 700;
font-display: swap;
}
字体加载慢的本质不是“下载慢”，而是“浏览器不知道怎么权衡”。font-display 控制策略，preload 控制时机，crossorigin 控制权限，woff2 控制体积——四个点里漏掉任意一个，优化就归零。 
