一个官网用了 11 个字重，字体治理比压缩更省

一个官网用了 11 个字重，首屏要下 5 个字体文件。这不是夸张，是今年 1 月我们在一个开发者工具站上看到的。删到 3 个字重之后，首屏字体请求从 5 个降到 1 个，体积从 1.1MB 降到 310KB。

字体是怎么膨胀的

设计师给了 4 个字体家族，每个 3 到 4 个字重，前端按设计稿逐个引入，没人算过总量。页面里真正用到的只有 3 个字重，剩下的都是复制粘贴留下的。

查法：跑一遍页面，用 DevTools 的 Coverage 面板看字体文件使用率，再对照 CSS 里所有 font-family 和 font-weight 声明。这个站有 40 多处声明，实际组合只有 9 种。

治理比压缩更省

很多团队一上来就想压缩字体，其实先做减法收益更大。这个站把 11 个字重砍到 3 个：正文 400、标题 600、强调 700。视觉上几乎没差别，因为设计稿本来只用这三档。

顺序是：先砍字重，再砍字族，最后才子集化。反过来做，等于给用不上的字重做子集，白费功夫。

可变字体值不值

可变字体一个文件包含多个字重，理论上更省。实测要看用几个：只用 2 到 3 个，普通字体子集更小；用 5 个以上，可变字体才有优势。

我们给这个站试过可变字体，单文件 340KB，比 3 个静态子集加起来还大，最后没用。这个结论有点反直觉，但数字摆在那儿。

四条判断清单

1. 页面实际用到几个字重？超过 3 个就要审
2. 有没有引入图标字体？能换 SVG 就换
3. 中文正文用系统字体行不行？行的话最省
4. 首屏字体文件总大小控制在 300KB 以内

按这四条走一遍，多数站的字体体积能砍掉六成。这个站改完首屏 LCP 从 2.4 秒降到 2.1 秒，幅度不算惊人，但省下的 800KB 流量对移动端用户是实打实的。

顺带纠正一个误区

字体不是"越少越好"到极端。有客户问能不能只用一个字重，全部靠浏览器合成粗体。合成粗体在低分屏上边缘发虚，中文尤其明显，视觉代价比省下的 60KB 大。三个字重是多数 B2B 软件站的下限。

上线后的复查

改完字体不是一劳永逸。我们给每个站加了一个每月自动跑的检查：抓首页 HTML，列出所有 @font-face 和实际引用，对比总数。有一次产品团队上线新页面，又带回来两个没用上的字重，被这个检查抓到了。

字体文件还要设长缓存，文件名带 hash，Cache-Control: max-age=31536000, immutable。少了这条，回访用户每次还要重新协商，白等一轮往返。