TTF

TrueType Font——由 Apple 和 Microsoft 共同开发的行业标准二进制字体格式。

.ttf TrueType Font Format
类型二进制轮廓
压缩
文件大小中等(未压缩)
支持范围98%+ 浏览器
最适用于桌面应用、开发调试
Bobcorn核心中间格式

什么是 TTF?

TrueType 由 Apple 于 1980 年代末开发,作为 Adobe PostScript Type 1 字体的替代方案,后被 Microsoft 引入 Windows。它将字形轮廓存储为二次贝塞尔曲线,在计算上比 PostScript 使用的三次曲线更简单(光栅化速度也更快)。

TTF 迅速成为 macOS 和 Windows 的通用字体格式。二十余年来,它是发布字体的标准方式——从系统字体到自定义字样皆是如此。虽然 WOFF/WOFF2 在网页交付方面已基本取代了它,但 TTF 仍是所有现代网页字体格式赖以构建的基础。

工作原理

TTF 文件是一个二进制容器,按组织,每张表存储特定类型的数据:

  • glyf——字形轮廓(实际矢量形状)
  • cmap——字符到字形的映射(哪个 Unicode 码位对应哪个字形)
  • head——字体元数据(每 em 单位数、创建日期、标志)
  • hmtx——水平度量(每个字形的推进宽度和左侧轴承)

对于图标字体,每个图标被分配一个位于私有使用区(U+E000 至 U+F8FF)的 Unicode 码位——该区间专门为应用自定义字符保留,不会与标准文本冲突。

在 CSS 中使用 TTF 图标字体
@font-face {
  font-family: 'MyIcons';
  src: url('myicons.ttf') format('truetype');
}

.icon {
  font-family: 'MyIcons';
  font-style: normal;
  font-weight: normal;
}

.icon-home::before {
  content: '\E001';
}

format('truetype') 提示告诉浏览器期望的字体文件类型,以便在不支持 TrueType 时跳过下载(尽管几乎所有浏览器都支持它)。

优缺点

    优点
  • 跨平台通用兼容性
  • 全面支持——桌面、移动和网页均可使用
  • 操作系统字体安装的标准格式
  • 支持字体微调,渲染质量良好
  • 规范文档完善
    缺点
  • 无压缩——比 WOFF/WOFF2 更大
  • 未针对网页交付优化
  • 在移动网络上下载可能较慢

浏览器支持

TTF 享有 98%+ 的浏览器支持率,涵盖所有现代浏览器及 Internet Explorer 9+。它同样被所有主要桌面操作系统原生支持——Windows、macOS 和 Linux——这意味着你可以直接将 TTF 文件安装为系统字体,无需任何转换。

虽然 TTF 无处不在,但在网页交付方面应优先选择 WOFF2(本质上是压缩的 TTF)。将原始 TTF 保留用于桌面应用、开发环境以及构建管道的基础格式。

何时使用 TTF

  • 桌面应用——作为系统字体安装,用于原生应用、设计工具或 IDE。
  • Electron 和原生应用——将 TTF 直接与应用捆绑,用于离线字体渲染。
  • 开发和测试——TTF 可用 FontForge、fontTools 或系统字体查看器等工具轻松检查。
  • 系统字体检查——需要使用操作系统级工具验证字形度量、字体微调或 cmap 表时。
在 Bobcorn 中
在 Bobcorn 中,TTF 是生成管道的核心枢纽格式。SVG 图标首先组装成 SVG 字体,然后转换为 TTF,再由 TTF 转换为 WOFF、WOFF2 和 EOT。TTF 始终作为管道的一部分生成——它是其他所有输出格式的基础。在构建桌面应用或需要将图标字体安装到操作系统时,请启用 TTF 导出。