1. 字体渲染基础：字体文件格式的底层差异与性能影响

做前端这么多年，我踩过最大的坑之一就是字体文件。你想想看，一个页面加载了 3 秒，结果 2 秒都在等字体——用户早跑了。今天咱们就从最底层聊聊，TTF、OTF、WOFF、WOFF2 这些格式到底差在哪，以及它们怎么影响你的页面性能。

1.1 字体文件格式的“身世”

先说 TTF（TrueType Font）。这是苹果和微软在 80 年代搞出来的标准。它的核心是二次贝塞尔曲线，说白了就是用数学公式描述每个字的轮廓。优点是兼容性极好，Windows 和 macOS 都原生支持。缺点嘛——文件体积大，而且没压缩。

OTF（OpenType Font）是 TTF 的升级版。Adobe 和微软一起搞的。它支持三次贝塞尔曲线，曲线更平滑，还能塞进更多高级排版特性，比如连字、花体。我个人习惯把 OTF 看成“TTF 的 Pro 版本”。

WOFF（Web Open Font Format）就纯粹是为 Web 生的。它本质上就是把 TTF 或 OTF 用 gzip 压缩了一下，加了个文件头。嗯，这里要注意：WOFF 不是新字体，只是包装格式。

WOFF2 是 WOFF 的下一代。它用了 Brotli 压缩算法，压缩率比 gzip 高 30%-50%。我在项目中遇到过，一个 300KB 的 TTF 字体，转成 WOFF2 后只剩 80KB 左右——效果非常明显。

1.2 四种格式的底层差异

咱们直接上表格，对比一目了然：

特性	TTF	OTF	WOFF	WOFF2
曲线类型	二次贝塞尔	二次/三次贝塞尔	同 TTF/OTF	同 TTF/OTF
压缩算法	无	无	gzip	Brotli
平均压缩率	1x（基准）	1x	~60%	~35%
浏览器支持	全平台	全平台	IE9+	Chrome 36+ / Firefox 39+ / Safari 12+
高级排版特性	有限	丰富	同 OTF	同 OTF
适用场景	桌面/旧系统	设计/印刷	Web（过渡）	Web（推荐）

为什么会这样？说白了，TTF 和 OTF 设计时就没考虑网络传输。它们是为本地安装准备的。WOFF 和 WOFF2 才真正为 Web 优化过。

1.3 性能影响：文件大小只是冰山一角

很多人以为字体性能就是文件大小。其实不止。我总结了三层影响：

1. 下载时间：文件越大，下载越慢。WOFF2 在这块完胜。
2. 解析时间：浏览器下载完字体后，需要解压、解析字形表、建立字形索引。TTF 的二次曲线解析快，但文件大；OTF 的三次曲线更复杂，解析稍慢。
3. 渲染时间：字体加载完成后，浏览器要重新布局（Reflow）所有用到该字体的文本。这个开销跟字体格式无关，但跟字体文件中的字形数量有关。

1.4 知识体系：一张图看懂

下面这张 SVG 图，把四种格式的关系和性能影响串起来了：

1.5 避坑指南：我曾经踩过的雷

我曾经在一个电商项目中，直接用了设计师给的 TTF 字体文件。结果页面在 3G 网络下加载了 8 秒才显示文字——用户全跑了。后来换成 WOFF2，首屏时间降到 2.5 秒。

还有一次，我为了兼容 IE9，同时提供了 WOFF 和 WOFF2。结果发现 WOFF 的 gzip 压缩在某些老旧服务器上没开启，导致实际传输的还是原始大小。嗯，这里要注意：WOFF 的压缩依赖服务器配置，WOFF2 的 Brotli 是文件内自带的，不受服务器影响。

1.6 实际项目中的选择策略

我建议按这个优先级来：

• 现代浏览器（90% 用户）：只用 WOFF2。Chrome、Firefox、Safari 12+、Edge 都支持。
• 需要兼容 IE11：加一个 WOFF 降级。
• 桌面端/本地应用：用 OTF，排版特性更丰富。
• 老旧系统（Windows XP）：备一个 TTF。

你想想看，一个字体文件从 400KB 压缩到 80KB，节省的不只是带宽，还有用户的等待时间。尤其是在移动端，每 100KB 都可能决定用户是留下还是离开。