你的网站字体加载拖慢速度了吗？

打开网页，等几秒才看到标题？文字先闪一下系统字体，再突然变成设计稿里的样式？别怀疑——八成是字体在拖后腿。

你挑的字体很美，但浏览器得把整个文件下完才能用它。用户可不等。

为什么字体文件会成为性能杀手？

中文字体动不动就几MB。一个思源黑体全量文件，光汉字就塞了两万多个，还有拼音、标点、符号……但你首页可能就写了“联系我们”四个字。

浏览器渲染时卡着等字体：没下完，就不显示文字；或者先用系统字体顶上，等字体到了再换——这就是那个让人皱眉的“字体闪烁”。

我帮一个做企业服务的客户查过，他们首页只用了12个汉字，却硬生生加载了一个4.8MB的全量字体。首屏文字晚了快2秒才出现。切掉不用的字后，字体只剩67KB，页面一刷就出来。

字体子集化：如何只加载用到的字？

说白了就是“按需打包”：扫描你网页里实际出现的字符，从大字体里抠出这一小撮，生成一个专属精简版。

手动数？太累。推荐用现成工具：Webpack 项目加个 fontmin-webpack-plugin，Vue 或 React 项目配个 @vue/cli-plugin-fontmin，构建时自动搞定。

静态内容效果最明显。比如一个技术博客，所有文章标题+正文常用字加起来不到2000个，字体从2.9MB压到41KB，刷新时文字不再“消失再弹出”。

动态内容（比如用户评论框）没法提前知道会输啥字，这时候子集化就力不从心了，得换招。

如何用font-display控制字体显示行为？

CSS 里这行代码，能立刻改变文字怎么“登场”：

font-display: swap;

意思是：别干等，先用系统字体把字打出来，等你的字体下载好，再悄悄换掉。用户看不到空白，只可能察觉一次轻微的字体切换。

另一个选择是：

font-display: optional;

浏览器只给字体100毫秒左右的加载时间。没下完？那就放弃，全程用系统字体。下次用户再进，如果字体已缓存，就会直接用上。适合对首屏速度极度敏感的页面，比如活动落地页。

预加载关键字体：怎样避免布局偏移？

如果Logo或主标题必须用特定字体，且不能接受任何闪烁或延迟，就该让它“插队”。

在 HTML 的 <head> 里加一行：

<link rel="preload" href="logo-font.woff2" as="font" type="font/woff2" crossorigin>

注意：只预加载真正绕不开的字体。比如电商首页的“限时抢购”大标题字体，不预加载它，文字一出来就跳一下。但商品详情页的二级标题字体，就别凑这个热闹——带宽要留给图片和JS。

动态内容的字体加载难题怎么破？

用户评论、昵称、搜索关键词……这些字你根本猜不到。子集化失效，就得组合出拳：

  • 静态部分用子集字体 + font-display: swap
  • 动态区域单独写一套字体规则，也用 swap 先保底
  • 更进一步，可以用 CSS 的 unicode-range 拆包：把常用汉字（U+4E00–U+9FFF）打一个包，生僻字另存为一个文件。浏览器自己判断该下哪个

比如某知识社区，把用户昵称涉及的高频字（姓名常用字+emoji）单独抽成一个小字体，配合 unicode-range 加载，动态区域字体体积降了80%，也没再出现文字错位。

服务端和CDN能帮上什么忙？

字体是静态资源，缓存是基本操作。在 Nginx 或 Vercel 的 _headers 里加一句：

*.woff2: cache-control: public, max-age=31536000, immutable

让浏览器记住：这个字体一年内不用重下。

压缩也不能漏。确认服务器开了 Brotli（比 Gzip 压得更狠），.woff2 文件还能再瘦一截。

如果你用的是 Vercel、Netlify 或腾讯云 CDN，上传字体时勾选“自动压缩”和“智能缓存”，它们会默默帮你做完大部分优化。

今天下班前就能动手做的一件事

打开 Chrome，访问你的网站，按 F12 打开开发者工具 → 切到「Network」→ 点右上角三个点 → 勾选「Disable cache」→ 刷新页面。

在筛选栏输入 font，看列表里字体请求的大小和耗时。挑出最大的那个，找到它对应的 @font-face 规则。

现在，就在那条规则里，加上这一行：

@font-face {
  font-family: 'YourBrandFont';
  src: url('your-font.woff2') format('woff2');
  font-display: swap; /* 就加这一行 */
}

保存，刷新。你会发现：文字不再消失，也不再闪烁两次——它稳稳地出现了。做完这一步，再考虑子集化或 unicode-range 这些进阶动作。