字体加载慢，会让文字要么”闪一下”、要么”空白半天”，既伤体验也直接拉低 LCP 和 CLS 两大核心指标。font-display 怎么设、字体怎么裁、怎么预加载，都是和首屏速度直接挂钩的硬指标。
很多站把几十个字重的字体全家桶引进来，结果只为用其中两种，首屏文字被死死卡在下载队列里。这篇文章把字体加载的坑和优化逐一拆开，让你既快又稳。更系统的前端性能可参考技术SEO 实战手册。
快速结论
- 字体是常被忽视的 LCP/CLS 元凶，font-display 设错会让文字长时间不可见或突然重排。
- 用 font-display: swap 让文字先用 fallback 显示再替换，避免空白；block/auto 要谨慎。
- 裁剪字重、用 woff2、只引需要的字符集，把字体体积压到最小最省。
- 对关键字体 preload，配合抓取效率思路，让首屏文字尽早出现不被拖后。
字体为什么会拖慢页面
浏览器遇到 @font-face 默认会等字体下载完才显示文字（FOIT），期间文字不可见，长则数秒白屏；或者下载完整体替换（FOUT），文字突然变样引发布局抖动。两种都伤体验，也直接拉高 LCP 和 CLS 两项指标。
更隐蔽的是，字体常常是关键阻塞资源：HTML 解析到引用字体的 CSS，要先拿到字体才渲染文字，关键渲染路径被拖长。不少小站把整族字体引进来，外加多语言全套，体积爆炸，纯属浪费带宽和首屏时间，排名也跟着吃亏。
font-display 四种取值
font-display 控制”字体没下载完时文字怎么显示”。swap 让文字先用系统字体显示、字体到了再换，最友好；fallback 给极短不可见期；optional 几乎不等；block 是长时间空白，对 SEO 和体验都最差，尽量不要碰。
绝大多数站点都该用 swap。auto 和 block 容易制造白屏，除非有特别理由别碰。设 swap 后文字秒出，哪怕字体晚到也不影响首屏可读，LCP 自然更稳，用户也不会因为白屏直接跳出，跳出率降了排名才有支撑。
把字体体积压下来
第一招用 woff2 格式，比 ttf/woff 体积再小两成以上。第二招只引用用到的字重（如 400 和 700），别整族引入。第三招子集化，只打包页面实际出现的字符，中文站尤其要裁掉用不到的生僻字，能省下大量体积。
中文因为字符多，整包动辄几 MB，子集化收益最大——按页面用到的汉字生成子集，体积能砍到几十分之一。体积下去了，下载快了，字体不再是 LCP 瓶颈，首屏文字几乎即时可见。这和抓取预算优化同理：把资源花在刀刃上。
预加载关键字体
对首屏必用的字体用 提前下载，避免被排在图片等大资源之后。preload 要和 font-display: swap 配合，让字体早到、文字不空白，两者一起把首屏文字时延压到最低，用户感知到的速度明显改善。
但 preload 别滥用，只给真正首屏阻塞的那一两个字体，多了反而抢带宽挤占别的关键请求。它和资源提示里讲的 preconnect/preload 思路一致，都是把关键资源排到最前，让首屏尽早成形，而不是让字体在队列里掉队。
常见错误
错误一：用 block/auto 导致白屏，LCP 飙升。错误二：引了整族字体外加多语言全套，体积爆炸。错误三：preload 了一个根本没用到的字体，报警还占带宽。错误四：本地字体路径 404，文字 fallback 乱跳让用户困惑。
错误五：频繁换字体导致缓存失效，用户每次都重新下。这些坑都不难修，发版时把字体体积和 font-display 列入检查项，能挡掉大部分问题，也避免首屏体验被一颗字体拖垮，核心指标稳了收录和排名才有底气。
怎么验证字体影响
DevTools 的 Performance 面板看文字从”不可见”到”显示”的时机，对比设 swap 前后的空白时长；Network 的 Waterfall 里字体请求的耗时和是否阻塞关键渲染一目了然，能精确定位是哪一步拖了后腿。
字段数据看 GSC 的 Core Web Vitals，确认 LCP 和 CLS 是否随字体优化改善。字体优化是精细活，实验室和真实用户都要看，确认白屏和抖动真的消失，而不是只在本地测速漂亮——真实弱网环境才是最终的考核标准。
和整体性能的衔接
字体只是首屏性能的一块拼图，它和图片压缩、关键渲染路径、服务器响应一起决定 LCP。单点优化有用，但全链路一起看才能拿到稳定结果，建议把它纳入整站的性能预算里统一治理。
如果你还没做过整站性能盘点，可以先从技术SEO 实战手册的前端性能章节入手，把字体、图片、脚本排个优先级，再逐条优化。这样比东一榔头西一棒子更有效，也更容易向团队解释投入产出。
字体放哪里：CDN 还是同源
字体放哪里也有讲究：同源托管能少一次 DNS 解析，配合 preconnect 到 CDN 域名则能异步加速。两种都能用，关键是别让字体请求排在大图后面，确保它在关键渲染路径上始终靠前。
如果用了第三方字体服务，确认它支持 woff2 和 swap，并且节点离你的用户足够近。字体看似小事，但在每个页面都加载，累积起来对整站速度的影响比单篇大图更持久，值得花心思调好。
图：字体加载与 SEO 核心要点（运营GO 整理）
| 取值 | 表现 | 建议 |
|---|---|---|
| swap | 先显系统字再换 | 首选 |
| fallback | 极短空白 | 可用 |
| optional | 几乎不等 | 省流量场景 |
| block | 长空白 | 避免 |
下一步行动清单
- 给全站字体统一设 font-display: swap，去掉 block/auto。
- 转 woff2、只引用用到的字重、对中文做子集化。
- 对首屏关键字体加 preload，控制在 1-2 个以内。
- 用 DevTools 和 GSC 验证白屏与抖动是否真的消失。
- 把字体体积和 font-display 纳入每次发版的检查项。
