css 字体加载慢怎么办_font-face 优化与预加载

字体加载优化需四要素协同：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，否则无效

单纯在 里写 不起作用——浏览器无法识别这是字体，不会提前发起请求。必须显式声明类型和用途。

• 必须加 as="font"，否则预加载降级为普通 fetch
• 必须加 type="font/woff2"（匹配实际 MIME 类型），尤其当服务器未正确返回 Content-Type 时
• 只对关键字体预加载（如标题、首屏正文），非关键字体用 swap 更合理
• 不要预加载多个格式（.woff + .woff2），选一个最优格式（优先 .woff2）

crossorigin 属性不能省，否则字体加载会失败

字体是跨域资源（即使同站，现代浏览器也按 CORS 处理），漏掉 crossorigin 会导致 FontFace 加载报错：Failed to decode downloaded font 或控制台静默失败。

• crossorigin 必须存在，值可为空（crossorigin）或显式写 crossorigin="anonymous"
• 对应服务器需返回 access-Control-Allow-Origin: *（或具体域名）
• @font-face 中的 url() 无需重复加 crossorigin，由 或 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 控制体积——四个点里漏掉任意一个，优化就归零。