因为公司的一些业务，需要对字体的相关概念有一定的了解，这里稍微记录下。

首先，我们先来知道下，常见的几种字体文件类型。

TTF (TrueType Font)

只需要一个文件，包含一个单独的字体样式文件（普通、斜体、粗体等） 。TrueType 文件格式仅用于屏幕，字体文件的扩展名是 .ttf

兼容性如下：

OTF (OpenType Font)

它基于支持扩展字符集（连字、替代样式、字形等）的 TrueType 格式

字体文件的扩展名：

• 包含 TrueType 字体的 OpenType 文件后缀名为 .ttf。
• 包含 PostScript 字体的文件后缀名为 .oft。
• 如果是包含一系列 TrueType 字体的字体包文件，那么后缀名为 .ttc。

OTF 的兼容性和 TTF 相同。

WOFF（Web Open Font Format）

Web 开放字体格式 是一种网页所采用的字体格式标准。

WOFF 本质上是包含了基于 sfnt 的字体（如 TrueType、OpenType 或开放字体格式），且这些字体均经过 WOFF 的编码工具压缩，以便嵌入网页中。这个字体格式使用 zlib 压缩，文件大小一般比 TTF 小 40%。

兼容性如下：

WOFF2（Web Open Font Format2）

WOFF2 标准在 WOFF 的基础上，进一步优化了体积压缩，带宽需求更少，同时可以在移动设备上快速解压。

WOFF2 是使用 Brotli 方法进行的压缩，压缩率更高，所以文件体积更小。

兼容性如下：

性能对比

知道这些概念之后，我们来进行一下测试，在没有任何浏览器缓存的时候，我们去请求不同类型的字体文件，发现 OTF与TTF 的加载时间比 WOFF 格式来的长。

并且在页面渲染字体的时候，我们也能发现，还是 WOFF2 的渲染速度会更快。

总结

• OFT/TTF 的兼容性更好，但是其字体文件体积最大。
• WOFF 字体比 TTF 字体有更小的体积和更好的表现性。
• WOFF2 字体是对 WOFF 字体的升级。

如果不考虑兼容性的话，字体使用首推 WOFF2。