3. 字体文件格式解析：TTF、OTF、WOFF、WOFF2 的区别与适用场景
做前端开发这么多年，我遇到过最头疼的问题之一，就是字体文件选错了格式。明明设计稿上漂亮的字体，到了页面上要么不显示，要么加载慢得像蜗牛。说白了，就是没搞懂这些字体格式到底有什么区别。
今天咱们就把 TTF、OTF、WOFF、WOFF2 这四种常见格式彻底讲清楚。你想想看，搞懂了它们各自的脾气，以后选字体就跟选工具一样顺手。
一句话总结：TTF 是元老，OTF 是升级版，WOFF 是为 Web 压缩过的 TTF/OTF，WOFF2 是 WOFF 的进一步压缩版。现在 Web 项目首选 WOFF2，桌面设计首选 OTF。
3.1 TTF（TrueType Font）—— 老当益壮的桌面王者
TTF 是苹果和微软在 80 年代联合推出的格式。我刚开始做设计那会儿，电脑里装的几乎全是 TTF 字体。它的核心是用二次贝塞尔曲线来描述字形轮廓。
技术特点：
- 使用二次贝塞尔曲线，计算量小，渲染速度快
- 内置 hinting（微调）技术，小字号下也能保持清晰
- 单个文件包含所有字形信息，跨平台兼容性好
- 最大支持 65535 个字形，对大多数语言够用
适用场景：
- Windows 和 macOS 桌面系统默认字体格式
- Office 文档、PDF 等本地文件
- 老旧系统的兼容性保障
注意：TTF 在 Web 上未经压缩时体积较大。我曾经把一个 5MB 的 TTF 直接丢到页面上，结果首屏加载慢了 3 秒。后来才意识到，TTF 更适合本地使用，Web 场景下一定要转成 WOFF 或 WOFF2。
3.2 OTF（OpenType Font）—— 功能更强大的进化版
OTF 是微软和 Adobe 联合推出的格式，可以看作是 TTF 的升级版。它最大的改进是支持三次贝塞尔曲线和 OpenType 特性。
技术特点：
- 支持三次贝塞尔曲线，曲线更平滑，文件更小
- 内置 OpenType 特性：连字、花体、数字变体、上下文替换等
- 支持 Unicode 编码，一个字体文件可包含多种语言字符
- 最大支持 65535 个字形，与 TTF 相同
OTF 与 TTF 的核心差异：
| 对比项 | TTF | OTF |
|---|---|---|
| 曲线类型 | 二次贝塞尔 | 三次贝塞尔 |
| OpenType 特性 | 不支持 | 完整支持 |
| 文件体积 | 相对较大 | 相对较小 |
| 渲染精度 | 小字号有 hinting 优势 | 大字号曲线更平滑 |
| 适用场景 | 桌面文档、老旧系统 | 专业排版、多语言、Web |
我个人习惯在专业排版项目中使用 OTF。比如做一本多语言手册，需要同时显示英文、中文和阿拉伯文，OTF 的 Unicode 支持就特别省心。一个字体文件搞定所有语言，不用来回切换字体。
3.3 WOFF（Web Open Font Format）—— 专为 Web 而生
WOFF 是 W3C 推荐的 Web 字体标准格式。说白了，它就是给 TTF 或 OTF 套了一层压缩壳，再加上一些元数据信息。
技术特点：
- 基于 TTF/OTF 进行 gzip 压缩，体积减少 30%-50%
- 支持添加字体元数据（版权、版本、描述等）
- 所有现代浏览器都支持
- 保留了 TTF/OTF 的 hinting 信息
适用场景：
- Web 页面字体加载
- 需要兼容老旧浏览器的项目
- 作为 WOFF2 的降级方案
经验之谈：我在做企业官网时，通常会把字体声明写成这样：先写 WOFF2，再写 WOFF，最后写 TTF 作为兜底。这样新浏览器用 WOFF2，老浏览器自动降级到 WOFF 或 TTF，兼容性拉满。
3.4 WOFF2（Web Open Font Format 2）—— 当前 Web 字体最优解
WOFF2 是 WOFF 的升级版，2018 年成为 W3C 推荐标准。它使用了 Brotli 压缩算法，压缩率比 WOFF 的 gzip 高出 30%-50%。
技术特点：
- 使用 Brotli 压缩，体积比 WOFF 再小 30%-50%
- 自定义预处理和变换，进一步优化字形数据
- 解压速度比 WOFF 更快
- 支持所有现代浏览器（Chrome、Firefox、Safari、Edge）
四种格式体积对比（以 Noto Sans SC 为例）：
| 格式 | 原始体积 | 压缩后体积 | 压缩率 |
|---|---|---|---|
| TTF | 5.2 MB | 5.2 MB | 0% |
| OTF | 4.8 MB | 4.8 MB | 约 8% |
| WOFF | 5.2 MB | 2.6 MB | 约 50% |
| WOFF2 | 5.2 MB | 1.5 MB | 约 71% |
你看这个对比就明白了。WOFF2 能把 5MB 的字体压到 1.5MB，对页面加载速度的提升是立竿见影的。我现在做 Web 项目，只要浏览器支持，一律用 WOFF2。
3.5 四种格式的选型决策
为了让你更直观地理解怎么选，我画了一张决策流程图。嗯，这张图我反复改了好几版，确保每个分支都清晰。
3.6 实际项目中的最佳实践
说了这么多理论，来点实际的。我在项目中总结了一套字体格式选型方案，你可以直接拿来用。
Web 项目字体声明（推荐）：
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff'),
url('myfont.ttf') format('truetype');
font-display: swap;
}字体格式转换工具推荐：
- Font Squirrel Webfont Generator：在线转换，支持批量处理
- Google Webfonts Helper：下载 Google Fonts 并自动生成所有格式
- fonttools（Python 库）：命令行转换，适合自动化流程
小技巧：用 fonttools 转换时，可以加上 --flavor=woff2 参数直接生成 WOFF2。我写过一个脚本，每次构建时自动把项目中的 TTF 转成 WOFF2，省了不少手动操作的时间。
避坑指南：
- 不要直接使用 TTF 作为 Web 字体，除非你不在乎加载速度
- WOFF2 虽然压缩率高，但解压需要浏览器支持 Brotli，IE11 不支持
- OTF 的 OpenType 特性在 Web 上可能不被完整支持，测试后再上线
- 字体文件尽量控制在 2MB 以内，超过这个大小建议做子集化
我曾经在一个移动端项目中直接用了 OTF 字体，结果 Android 4.x 的浏览器完全不显示。后来查了半天才发现，那个版本的 WebView 不支持 OTF 的某些特性。从那以后，我养成了一个习惯：上线前一定在目标浏览器上做字体渲染测试。
好了，这四种格式的区别和选型思路，你应该心里有数了。记住一句话：桌面选 OTF，Web 选 WOFF2，兼容性不够就用 WOFF 降级。下次遇到字体显示问题，先看看是不是格式选错了。