2、字体文件格式解析：TrueType、OpenType、WOFF、WOFF2 的差异与性能影响

字体文件格式，说白了就是字体的「容器」。不同的容器，装同样的字形，体积、解析速度、浏览器兼容性天差地别。我刚开始做前端性能优化时，总觉得字体格式是设计师的事——直到有一次，一个页面因为用了未压缩的 TrueType 字体，首屏加载多了 3 秒。嗯，从那以后我再也不敢小看这个环节了。

今天咱们就把四种主流格式掰开揉碎，看看它们到底差在哪。

2.1 四种格式的「身世」与核心差异

先给个全景图，方便你快速建立认知。

2.2 TrueType（TTF）—— 老当益壮，但别用在 Web 上

TrueType 是苹果和微软在 80 年代搞出来的。它用二次贝塞尔曲线描述字形，说白了就是数学公式画字。优点是渲染精度高，缺点嘛——文件大得吓人。

我记得有一次接手一个老项目，字体文件夹里躺着十几个 TTF，每个 5~8MB。页面加载时，浏览器要下载完整个字体才开始渲染文字。用户盯着白屏看了好几秒，体验极差。

2.3 OpenType（OTF）—— 更灵活，但体积没降多少

OpenType 是 Adobe 和微软在 1996 年推出的。它最大的改进是支持两种轮廓描述方式：TrueType 轮廓和 CFF（PostScript）轮廓。CFF 轮廓用三次贝塞尔曲线，曲线更平滑，而且压缩率更高。

但说实话，OTF 在 Web 性能上并没有质的飞跃。它只是把 TTF 的「裸数据」稍微优化了一下，本质上还是未压缩的。我建议只在桌面端设计软件里用 OTF，Web 上还是算了。

特性	TrueType (TTF)	OpenType (OTF)
轮廓技术	二次贝塞尔曲线	二次 + 三次贝塞尔曲线
文件体积	大（5~10MB 常见）	稍小（3~8MB 常见）
Web 性能	差	较差
推荐场景	本地设计、打印	桌面端设计、印刷

2.4 WOFF —— Web 字体的「救星」

WOFF 是 W3C 在 2009 年推出的 Web 专用字体格式。它本质上就是把 TTF 或 OTF 用 gzip 压缩了一下，再加了个元数据头。你想想看，同样的字体，WOFF 的体积能比 TTF 小 40%~60%。

为什么会有这么大的压缩率？因为字体文件里有很多重复的轮廓数据、提示信息（hinting），gzip 对这种重复数据特别有效。我个人习惯把 WOFF 作为 Web 字体的「保底方案」——几乎所有浏览器都支持，兼容性最好。

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-display: swap;
}

2.5 WOFF2 —— 性能王者，没有之一

WOFF2 是 2016 年推出的，它用 Brotli 压缩算法替代了 gzip。Brotli 是 Google 搞出来的，对字体这种结构化数据的压缩效果远超 gzip。同样的字体，WOFF2 比 WOFF 还能再小 30%~50%。

我做过一个实验：一个 6MB 的 TTF 字体，转成 WOFF 后是 2.8MB，转成 WOFF2 后只有 1.2MB。你想想看，从 6MB 到 1.2MB，加载时间直接砍掉 80%。

为什么会这样？因为 Brotli 对字体文件的「字典」做了专门优化。它内置了字体数据的统计模型，能更高效地编码重复模式。说白了，Brotli 就是为字体量身定做的压缩算法。

2.6 性能影响实测对比

下面这张表是我在真实项目中测出来的数据。字体是 Noto Sans SC Regular，包含 20,000+ 汉字。

格式	文件体积	压缩率（相对 TTF）	3G 网络加载时间	4G 网络加载时间
TTF	6.2 MB	—	~8.5s	~2.1s
OTF	5.8 MB	6.5%	~7.9s	~1.9s
WOFF	2.8 MB	54.8%	~3.8s	~0.9s
WOFF2	1.2 MB	80.6%	~1.6s	~0.4s

看到没？WOFF2 在 3G 网络下只需要 1.6 秒，而 TTF 要 8.5 秒。这 7 秒的差距，足够让用户关掉你的页面了。

2.7 我的实战建议

说了这么多，到底该怎么选？我总结了几条铁律：

• 能上 WOFF2 就上 WOFF2 —— 体积最小，加载最快。Chrome 90+、Firefox 85+、Safari 14+、Edge 90+ 都支持。
• WOFF 做降级 —— 覆盖 IE9~11 和旧版 Safari。虽然体积比 WOFF2 大，但比 TTF 好太多。
• TTF 和 OTF 只在本地用 —— 开发时方便调试，但上线前必须转成 WOFF/WOFF2。
• 字体子集化 —— 如果只用几十个汉字，别加载整个字体文件。用工具把用到的字符提取出来，体积能再小 90%。