WOFF2

WOFF2 由 Google 开发，于 2018 年 3 月成为 W3C 推荐标准。它在 WOFF 概念的基础上，将 zlib 压缩替换为 Brotli——同样由 Google 开发的压缩算法，可实现显著更好的压缩比。

但 WOFF2 并不只是"压缩更好的 WOFF"。它引入了一种预处理变换机制，在压缩前对字体数据进行重组，使其更易于压缩。对于 TrueType 轮廓，这意味着对字形坐标应用预测编码——将每个点编码为相对于预测值的差值，而非绝对坐标。结果是一个冗余度极高的字节流，Brotli 可以对其进行大幅压缩。

这种两步法——特定领域预处理，再加上通用压缩——正是 WOFF2 始终能在所有格式中生成最小字体文件的原因。

WOFF2 对源字体数据应用两阶段压缩管道：

• 第一阶段：预处理变换——字体专用变换对数据进行重组以最大化可压缩性。对于 TrueType 字形轮廓，使用坐标的预测编码——每个点被编码为相对于预测位置的差值，产生更小的数值。其他字体表也会应用类似变换。
• 第二阶段：Brotli 压缩——预处理后的数据用 Brotli 进行压缩。Brotli 将 LZ77 滑动窗口压缩与霍夫曼编码和内置静态字典相结合，在典型字体数据上比 zlib 实现 20-30% 更好的压缩率。

在浏览器端，过程反转：先 Brotli 解压，再逆变换以重建原始字体表。尽管多了一个步骤，WOFF2 的解压实际上比 WOFF1 更快——Brotli 专为快速解码设计，而更小的文件在网络上传输也更快。

@font-face {
  font-family: 'MyIcons';
  src: url('icons.woff2') format('woff2');
  font-display: swap;
}

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

注意我们只列出了单个 src——仅 WOFF2。凭借 97%+ 的浏览器覆盖率，许多现代项目不再需要兜底格式。font-display: swap 指令告诉浏览器在图标字体加载时立即用回退字体显示文字，防止出现不可见文字。

WOFF2 在所有现代浏览器中均有广泛支持。唯一显著的缺口是已于 2022 年 6 月被 Microsoft 正式停用的 Internet Explorer。

全球综合覆盖率约为 97%。剩余约 3% 几乎全部是遗留 IE 安装和非常老旧的移动浏览器。

为说明 WOFF2 的压缩优势，以下是包含 200 个字形的图标字体的典型文件大小：

节省量随图标集规模的增加而累积。一个 500 个字形的字体 TTF 可能达到 200 KB，WOFF 约 120 KB，而 WOFF2 仅约 82 KB。经过数千次页面加载，这些千字节直接转化为更快的渲染时间和更低的带宽成本。

始终使用。对于任何基于网页的图标字体部署，WOFF2 都应该是默认格式。它提供最小的文件体积、最快的解压速度以及几乎全面的浏览器支持。

唯一不使用 WOFF2 的场景是你的目标是 Internet Explorer——在这种情况下，将其与 WOFF 配合作为兜底：

@font-face {
  font-family: 'MyIcons';
  src: url('icons.woff2') format('woff2'),
       url('icons.woff') format('woff');
  font-display: swap;
}

现代浏览器会下载 WOFF2 文件；IE 11 则会落回到 WOFF。所有人都能获取字体，所有人都能获取压缩版本。