网页字体优化：TTF转WOFF2体积收益与加载策略
将TTF/OTF转为WOFF2可降低约30%相对WOFF、50%相对裸TTF的体积，配合正确策略可优化网页加载性能。
更新于 2026-08-11
WOFF2的压缩体积收益
WOFF2采用Brotli压缩算法，相对使用gzip压缩的WOFF格式，体积可减少约30%，相对未压缩的裸TTF/OTF字体，体积可减少约50%。
体积压缩直接降低网页加载时的字体传输数据量，减少带宽占用，缩短首屏资源加载完成时间，尤其适合移动网络环境下的页面访问。
WOFF2浏览器支持情况
2016年之后发布的所有主流桌面与移动浏览器均原生支持WOFF2格式，无需做额外兼容处理。
不同浏览器对WOFF2的支持起始版本可参考下表，现阶段主流版本都覆盖该格式，可放心在生产环境使用。
| 浏览器 | 支持WOFF2的起始版本 |
|---|---|
| Chrome | Chrome 48（2016年1月发布） |
| Firefox | Firefox 44（2016年1月发布） |
| Safari | Safari 10（2016年9月发布） |
| Edge | Edge 14（2016年8月发布） |
@font-face与子集化的配合方案
使用WOFF2字体时，需要在CSS中通过@font-face规则声明字体，将src属性的优先级最高位置分配给WOFF2格式。
配合unicode-range属性可以实现字体子集化，每个@font-face对应一段unicode范围，浏览器仅会加载当前页面内容所需的字体子集，减少不必要的资源加载。
字体渲染与CJK字体优化要点
CSS中需为@font-face声明font-display: swap属性，该属性会让浏览器在WOFF2字体加载完成前，先用系统默认字体展示文本，避免首屏出现空白文字块，保障首屏内容可正常阅读。
CJK（中日韩）字符集字体包含数千至数万个字符，全量文件体积可达数MB到十余MB，必须通过子集化提取页面所需字符，才能将单文件体积控制在合理范围，保障加载性能。
常见问题
我还需要保留旧格式WOFF或TTF作为回退吗？
面向主流用户的站点可仅保留WOFF2，若需兼容2016年前的旧浏览器，可在@font-face src中追加WOFF作为回退格式，以官网当前公示为准。
在线TTF转WOFF2工具的转换结果合规吗？
合规的转换工具遵循WOFF2格式规范，OKfmt提供的TTF/OTF转WOFF2工具生成的文件符合标准，可直接用于生产环境。
非中文字体需要做子集化处理吗？
西文字符集原生体积较小，全量一般在100KB到300KB区间，若仅使用常用字符也可子集化，进一步缩小体积降低加载时间。