字体格式互转(TTF、OTF、WOFF、WOFF2)
进入字体转换器
主界面「字体转换器」分类。
支持的格式
| 格式 | 扩展名 | 适用场景 |
|---|---|---|
| BIN | .bin | 二进制字体数据 |
| CFF | .cff | Compact Font Format(PostScript 字体) |
| DFONT | .dfont | Mac OS 经典字体包 |
| EOT | .eot | 旧版 IE 浏览器(已过时) |
| FON | .fon | Windows 光栅字体(位图,已过时) |
| OTF | .otf | OpenType,跨平台高质量字体 |
| PFA | .pfa | PostScript Type 1(ASCII) |
| PFB | .pfb | PostScript Type 1(二进制) |
| PS | .ps | PostScript 字体文件 |
| PT3 | .pt3 | PostScript Type 3 |
| SVG | .svg | SVG 字体(矢量,现代浏览器支持) |
| T11 | .t11 | OpenType CFF |
| T42 | .t42 | TrueType 包装的 PostScript |
| TTF | .ttf | TrueType,最通用,Windows/Mac/iOS/Android 全支持 |
| TTF.BIN | .ttf.bin | TTFont 二进制 |
| WOFF | .woff | 网页字体,压缩版 TTF/OTF |
| WOFF2 | .woff2 | 更好的压缩,现代浏览器首选 |
场景一:TTF → WOFF2(网页字体压缩)
TTF 字体文件通常几 MB,网页上用会拖慢加载速度。转成 WOFF2 体积减 30%-50%。
- 选 .ttf / .otf 文件
- 字体转换器 → WOFF2
- 转换完用
<link>或@font-face嵌入网页
CSS @font-face 声明示例
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont.woff2') format('woff2'),
url('/fonts/myfont.woff') format('woff'); /* 老浏览器兜底 */
font-weight: normal;
font-style: normal;
}
场景二:OTF → TTF(跨平台)
某些 Mac 专属的 OTF 字体在 Windows 上不认,需要转成 TTF。
- 选 .otf
- 字体转换器 → TTF
场景三:字体子集化(仅保留需要的字符)
完整中文字体文件通常 3-10MB。如果网页只用少量字,可以做子集化只保留用到的字符,体积减到几百 KB。
- 选字体文件
- 字体转换器 → 同格式或 WOFF2
- Settings 中输入要保留的字符列表(如「一二三四五六七八九十」)
- 输出只有这些字符的轻量字体
File Converter 是否支持子集化取决于版本。如果 Settings 里没找到,用专门工具(fonttools / Glyphs)。
参数调整
| 参数 | 说明 | 推荐 |
|---|---|---|
| 压缩优化 | WOFF/WOFF2 的压缩等级 | 最大压缩 |
| TrueType 提示 | 是否保留 hinting 信息 | 移动端可以关(省空间) |
| 嵌入许可 | 是否允许嵌入(CSS @font-face) | 网页字体必须允许嵌入 |
| 字符子集 | 只保留指定字符 | 网页场景强烈建议做 |
网页字体兼容性
| 浏览器 | TTF/OTF | WOFF | WOFF2 | SVG | EOT |
|---|---|---|---|---|---|
| Chrome | ✅ | ✅ | ✅ | ✅ | ❌ |
| Firefox | ✅ | ✅ | ✅ | ✅ | ❌ |
| Safari | ✅ | ✅ | ✅ | ✅ | ❌ |
| Edge | ✅ | ✅ | ✅ | ✅ | ❌ |
| IE(旧) | ⚠️ | ⚠️ | ❌ | ❌ | ✅ |
结论:现代浏览器直接用 WOFF2 + WOFF 兜底,完全够用,不需要再维护 SVG / EOT。
实战场景
场景:用中文字体做网页 LOGO
- 找到心仪的中文字体(思源黑体/站酷快乐体等)
- File Converter 转 WOFF2 + 做子集化(只保留 LOGO 用的那几个字)
- 体积从 5MB 减到 100KB 以内
- CSS @font-face 引入,LOGO 文字直接用该字体渲染