字体加载慢的根源是浏览器默认阻塞渲染，font-display是核心控制开关，常用swap（立即替换）、optional（快速加载则用否则弃用）、fallback（短等待后降级）、block（默认阻塞）；配合preload、WOFF2压缩、子集提取和合理字重可显著优化。
字体加载慢不是因为 @font-face 本身慢，而是浏览器默认会阻塞文本渲染，直到字体下载完成或超时（通常 3 秒），造成“空白期”或“闪动”。关键在控制加载行为，而不是禁用字体。
font-display 是核心开关
font-display 决定字体加载期间如何显示文本，它有 5 个取值，常用的是：
- swap：立即用系统字体显示，等自定义字体加载完再替换。最常用，用户体验最稳；
- optional：只在字体能快速加载（约 100ms 内）时使用，否则直接放弃，全程用后备字体。适合非关键文字（如图标字体、装饰性标题）；
- fallback：短等待（约 100ms）后降级，之后即使字体加载完成也不替换。平衡性能与一致性；
- block：阻塞渲染，等字体加载或超时（3s）才显示文本——这是默认行为，也是“慢”的根源；
懒加载字体 ≠ 延迟加载 @font-face
字体本身不能像图片那样“滚动到才加载”，但可以做到逻辑上的“按需加载”：
- 把非首屏/非关键字体（如手写体、装饰标题字）的
@font-face放在独立 CSS 文件中，仅在对应组件挂载时动态插入该 CSS； - 用
font-display: optional配合preload控制优先级，比如只预加载正文字体，跳过副标题字体； - 避免在全局 CSS 中一次性声明所有字体，尤其含多个
font-weight或font-style变体，每个变体都算一个独立请求。
配合优化更有效
单靠 font-display 不够，还需基础优化：
- 用
提前拉取关键字体，特别是font-display: swap下，能减少替换延迟； - 字体文件尽量用 WOFF2 格式（比 WOFF 小 30%），并启用 Gzip/Brotli 压缩；
- 限制字体子集：中文可按需提取常用字（如 3500 基础汉字），英文可删掉不常用的符号和斜体；
- 慎用
font-weight: 300/600/700等非标准粗细——浏览器可能无法匹配，强行模拟加粗导致渲染失真或额外请求。
基本上就这些。重点不是“怎么懒”，而是“什么时候必须等、什么时候可以换、什么时候干脆不用”。合理组合 font-display、preload 和字体精简，就能让文字又快又稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
