Web 与字体文件扩展名指南：WOFF2、TTF、OTF 和 ICO
在构建网站或设计数字产品时，为排版和图标选择正确的文件格式对于视觉质量和加载速度都至关重要。使用过时的字体格式可能会导致在字体加载时出现“不可见”文本，或者显著降低网站的性能。
本指南详细介绍了您需要了解的基本字体和 Web 图形扩展名。
快速参考表：字体和 Web 格式
| 扩展名 | 全称 | 压缩率 | 主要用途 |
|---|---|---|---|
.woff2 |
Web Open Font Format 2.0 | 极高 | 现代 Web（性能最佳） |
.woff |
Web Open Font Format 1.0 | 高 | Web（旧版浏览器支持） |
.ttf |
TrueType Font | 低 | Windows/macOS 桌面，基础 Web |
.otf |
OpenType Font | 低 | 图形设计，高级排版 |
.svg |
Scalable Vector Graphics | 变化 | Web 图标，Logo，矢量艺术 |
.ico |
Icon | 无 | Favicon（浏览器标签图标） |
1. 现代 Web 标准 (.woff2)
WOFF2 是当今 Web 排版的黄金标准。它使用先进的压缩算法 (Brotli)，使字体文件比原始 WOFF 小多达 30%。
- 优点：加载速度最快，所有现代浏览器均支持。
- 为什么要使用它？ 如果您只关心现代浏览器（Chrome、Firefox、Safari、Edge），
.woff2是您在 CSS@font-face中唯一需要包含的格式。
2. 旧版支持 (.woff)
WOFF2 的前身。虽然仍被广泛支持，但效率不如前者。
- 为什么要使用它？ 如果您需要支持尚未理解 WOFF2 的稍旧版本浏览器，请将其用作备选方案。
3. 桌面和设计标准 (.ttf, .otf)
这些是您安装在计算机上以在 Word、Photoshop 或 Figma 中使用的格式。
- TTF (TrueType)：由 Apple 和 Microsoft 在 20 世纪 80 年代开发。它是通用用途最常见的格式。
- OTF (OpenType)：基于 TTF 构建，但支持高级“OpenType 特性”，如连字、小型大写字母和替代字形。设计师在高端印刷和数字工作中更倾向于使用 OTF。
- Web 使用：虽然您可以在 Web 上使用这些格式，但它们未经压缩且很重。最好先将它们转换为 WOFF2。
4. 可缩放图形 (.svg)
与作为字符集合的字体不同，SVG 是一种矢量图像格式。
- Logo 和图标：SVG 非常适合 Logo，因为无论您放大多少，它们都不会模糊。
- 在 CSS 中：您可以将 SVG 用作背景图像，甚至可以作为“SVG 字体”（尽管后者现在大多已被弃用，转而支持 WOFF2）。
5. Favicon (.ico)
.ico 格式是一种专门的容器，可以在单个文件中保存多个不同尺寸（16x16、32x32、48x48）的图标版本。
- 主要用途：您在浏览器标签中看到的“favicon”。
- 现代替代方案：大多数现代浏览器现在支持 PNG 或 SVG 作为 favicon，但
.ico仍然是最具兼容性的备选方案。
Web 排版最佳实践
- 优先考虑 WOFF2：始终在 CSS 中首先列出
.woff2，以确保现代浏览器获得最小的文件。 - 子集化您的字体：许多字体文件包含您不使用的数百种语言的字符。“子集化”字体会移除未使用的字符，从而进一步缩小文件大小。
- 使用
font-display: swap：这可以确保文本使用系统字体立即变为可见，并在自定义字体加载完成后进行切换。
常见问题 (FAQ)
问：我可以实现在线将 .ttf 转换为 .woff2 吗？
答： 是的！有许多免费工具可以将您的桌面 .ttf 或 .otf 文件压缩为适用于 Web 的 .woff2 文件。
问：WOFF2 是否支持 OTF 的所有特性？
答： 是的。WOFF2 本质上是一个包裹在高效压缩层中的 OTF 或 TTF 文件。它保留了原始文件的所有排版特性（如连字）。
问：我应该为我的网站图标使用 SVG 吗？
答： 通常是的。SVG 非常清晰，支持透明度，并且可以使用 CSS 进行样式设置。对于复杂的图标集，一些开发人员更喜欢“图标字体”（使用 .woff2 文件），但内联 SVG 被认为是现代的最佳实践。
Tool3M 上的相关工具
- 单位转换器：计算像素 (Pixels)、EM 和 REM 之间的字体大小。
- 图片转 Base64：将小型 SVG 图标直接嵌入到您的 CSS 或 HTML 中。