我总算搞懂网页字体格式了

在做网页时你可能会发现一个问题：明明一套字体就够用了，为什么 .ttf、.woff、.woff2、.eot、.otf、.svg 这些字体格式都堆在一起？到底有什么区别？我要用哪一个才是最合适的？

今天我们就把这些字体格式一次说清楚，彻底搞明白它们的来龙去脉。

一、常见字体格式有哪些？

我们先来列一遍你会在前端开发中遇到的字体格式：

二、每个字体格式到底有啥区别？

1. ttf — 最基础的 TrueType 字体

这是最常见的字体格式之一，支持大多数操作系统。几乎所有设计师的本地字体，都是  .ttf  或  .otf  结尾。

特点：

• 文件体积大
• 浏览器支持广泛（除了最古老的 IE）

推荐程度：⭐️⭐️（一般用于转换成 Web 字体格式）

2. otf — 支持高级排版的 OpenType 字体

.otf 是 .ttf 的“升级版”，支持更多的排版特性，比如连字（ligatures）、变体字形等。

特点：

• 更专业的排版支持
• 同样体积大
• 浏览器支持尚可，但不是最优格式

推荐程度：⭐️⭐️（适合高质量排版或作为源文件使用）

3. eot — 被 IE 束缚的古董字体格式

.eot 是微软专门为 IE6-8 推出的字体格式。

特点：

• 只支持 IE（还不是 Edge）
• 现在已经完全淘汰
• 如果你还需要兼容 IE8，那你太辛苦了

推荐程度：❌（可以不再管它了）

4. woff — 为 Web 而生的主力字体格式

.woff 是第一个专为 Web 优化的字体格式，压缩后体积更小，加载更快。

特点：

• 浏览器全面支持（IE9+）
• 支持字体版权信息嵌入
• 是实际部署时的主力格式之一

推荐程度：✅✅（常规 Web 字体首选）

5. woff2 — 更强压缩，现代浏览器的最爱

.woff2 是 .woff 的升级版，压缩率更高，大约可以再省 20% 文件体积。

特点：

• 支持 Chrome、Firefox、Edge、Safari（IE 不支持）
• 体积小，加载快
• 是现代 Web 的首选字体格式

推荐程度：🔥 强烈推荐！（兼容主流浏览器）

6. svg — 已退出历史舞台

.svg 字体曾用于 iOS 早期系统（如 iOS 4.3），现在已经不推荐使用了。

特点：

• 可以用 CSS 填充颜色、做动画
• 浏览器支持差
• 文件体积较大

推荐程度：❌（历史遗留格式）

三、我应该使用哪些字体格式？

现在开发网站，最推荐的组合是：

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

• .woff2  提供给现代浏览器使用，文件更小，速度更快。
• .woff  提供给兼容性稍差的浏览器作为备用。
• .ttf、.otf  可作为设计源文件，但不推荐直接用于 Web。
• .eot、.svg  可以彻底告别了。

四、字体文件太大怎么办？

可以使用字体子集工具（如  Fontmin、Transfonter）将字体文件精简，只保留用到的中文或英文字体。

举个例子：

原字体文件 1MB，提取后只保留“你好，世界”，最终可能只有几十 KB，加载速度提升巨大。