首屏字体文件 4.2MB,4G 网络下白屏接近四秒,网络面板里那个 ttf 一直是最大的一项,压缩率显示 0%。第一次遇到会往复杂处想,其实漏掉的多是个小前提。
fonttools ttLib.woff2 compress font.ttf # 输出 font.woff2,体积通常降到原来的四分之一 ls -lh font.ttf font.woff2
ttf 是未压缩的轮廓数据,同样的字库转成 woff2 通常只剩四分之一,服务器再开 gzip 也压不动二进制字体。主题里直接引用设计给的 ttf 就是这个结果。这一点先确认清楚,后面就不用反复试。
碰到「字体格式 woff2」这类问题,我习惯先把当前配置原样备份一份,改坏了立刻换回来,不用现场推。把复现步骤压到三条以内,交给同事也能跑出来,才算真的定位清楚。
改动写完就同步给同事,下一个人踩同一个坑,成本还是你的。验证用真实数据走一遍,测试数据太干净,边界情况根本碰不到。
具体做法是,先用 fonttools 把 ttf 转成 woff2 对比体积再决定要不要换;@font-face 里 woff2 写在前面 ttf 留作兜底 老浏览器自己会挑;确认服务器给 woff2 的 MIME 是 font/woff2 不然后面缓存会出问题。
改完照着核一遍,首屏字体请求从 4.2MB 降到 1MB 左右,弱网下白屏时间少了两秒。
