Web 前端 woff2 字体体积优化指南

• 最近一直在折腾这小博客，无意间发现一款很好看的字体，但奈何体积太大
• 查阅了不少文档，最终找到了解决办法，顺便分享给各位读者

格式介绍

• 先拓展一下常见的字体格式以及区别

1. Woff：Woff是一种高效的字体压缩格式，专门用于网页。Woff独有的特点是可以通过快速地压缩和解压缩技术提高网络字体传输的效率，降低网络带宽压力。因此，Woff字体被广泛应用于各类在线站点和平台。
2. Woff2：Woff22是Web Open Font Format 2.0的缩写，相比于Woff 1.0，Woff2格式可以将字体文件压缩率进一步提升达到30%以上，同时支持更多的OpenType字体特性，提高了字体的质量和可用性。
3. TrueType（TTF）：TTF字体是由Apple和Microsoft为PostScript而开发的字体格式。常用于Mac和Windows操作系统上，TTF一直是最常见的格式，所有主流浏览器都支持它。然而，IE8不支持TTF，且IE9上只有被设置成“installable”才能支持。TTF和OTF字体是没压缩的，因此文件体积大。
4. ​OpenType（OTF）：与TTF相比，OTF字体支持更多的高级特性，如连字、分数、上下文特定的大写和小写形式等。
5. ​Webdings：这是一种用于网页的特殊字体，包含了各种各样的符号和图形。
6. Eot（Embedded Open Type）：微软创造的字体格式，这种格式只在IE6-IE8里使用。

体积压缩

• 如果我们全站使用同一种字体，那么我们可能需要同时加载 Regular、Medium、Bold 等不同字重的文件，但拿鸿蒙字体举例：HarmonyOS_Sans_SC_Regular.ttf 大小高达 8MB，如果不对字体文件进行压缩，将极大增加网页加载速度，严重影响用户体验。
• WOFF2 获得了广泛的浏览器支持和最佳压缩效果，比 Woff 高出 30%。文件压缩可加快下载速度。Woff2 格式通常是现代浏览器实现完全兼容性所需的唯一格式
  [scode type="blue" size="small"]只有在需要支持旧版浏览器时，您才可能需要使用其他格式（例如 Woff、Eot 和 TTF）。 如果您不需要支持旧版浏览器，则没有理由依赖 Woff2 以外的网页字体格式。[/scode]

压缩方法

字体去繁

• GBK 结尾的字体偏大的原因是包含庞大的繁体字库，大多数网页并不需要，可以使用Python中 fontTools 得到字体的简体中文子集

• 先看一下Unicode表

  字符集	字数	Unicode 编码
  基本汉字	20902字	4E00-9FA5
  基本汉字补充	74字	9FA6-9FEF
  扩展A	6582字	3400-4DB5
  扩展B	42711字	20000-2A6D6
  扩展C	4149字	2A700-2B734
  扩展D	222字	2B740-2B81D
  扩展E	5762字	2B820-2CEA1
  扩展F	7473字	2CEB0-2EBE0
  扩展G	4939字	30000-3134A
  康熙部首	214字	2F00-2FD5
  部首扩展	115字	2E80-2EF3
  兼容汉字	477字	F900-FAD9
  兼容扩展	542字	2F800-2FA1D
  PUA(GBK)部件	81字	E815-E86F
  部件扩展	452字	E400-E5E8
  PUA增补	207字	E600-E6CF
  汉字笔画	36字	31C0-31E3
  汉字结构	12字	2FF0-2FFB
  汉语注音	43字	3105-312F
  注音扩展	22字	31A0-31BA
  〇	1字	3007

• 基本汉字（4E00-9FA5）区间内，简体字、繁体字是交叉的，没有一个固定的简体区间和繁体区间，所以需要一个简体字的 Unicode 表，经过整理，得到unicodes 文件，再加入 latin 的区间（0000-00FF），以及[post cid="2747" cover="" size=""/]作为参数传入 fontTools 获得字体子集。
• 下载 Unicode编码文件

[hide]下载:https://wwu.lanzouo.com/iKUs31mgadsb 密码:a3ud[/hide]

• 利用Python中Fonttools库可以进行取子集
• 先把 Unicode编码文件和ttf字体放入一个文件夹中
• 命令进入该目录，安装相关python库

pip install fonttools brotli

• 介绍一下该工具使用方法

pyftsubset <PATH> --unicodes-file=<PATH> --with-zopfli --flavor=woff2

# 参数
# pyftsubset <PATH>        # 待压缩字体文件路径或者当前目录字体名
# --unicodes-file=<PATH>   # unicode.txt 文件路径
# --with-zopfli            # 使用 Google 压缩算法
# --flavor=<TYPE>          # 输出字体格式

• pyfsubset可以完成整个流程，直接使用以下命令

pyftsubset fonts.ttf  --unicodes-file=sc_unicode.txt --with-zopfli --flavor=woff2

• 得到最终压缩fonts.subset.woff2文件

字体压缩

• 字体压缩也可以使用Google的woff2工具，可实现对ttf格式文件压缩转换和对woff2格式解压缩
  谷歌/WOFF2 (github.com)
  Linux下演示

yumt install -y git g++ make
git clone --recursive https://github.com/google/woff2.git  
cd woff2
make clean all
./woff2_compress fonts.ttf //压缩fonts.ttf文件为woff2格式
./woff2_decompress fonts.woff2  //解压woff2文件为ttf格式

woff2 Win版

• 利用google woff2代码打包得win版本，使用方法与linux中相同

• 下载地址

[hide]下载:https://wwu.lanzouo.com/ih6Uh1mghgha 密码:3ozx[/hide]

分片处理

• 我们可对字体进行分片切割处理，再部署到cdn节点上，这样可以实现在更短时间内加载完字体
• 在线分割工具，上传ttf文件可分割转换成多个woff2文件

1. 在线字体分包器 - 免费帮助你将字体部署到网站上 (chinese-font.netlify.app)
2. KonghaYao/cn-font-split: 划时代的字体切割工具，CJK与任何字符！支持 otf、ttf、woff2 字体多线程切割，完美地细颗粒度地进行包大小控制。A revolutionary font subetter that supports CJK and any characters! It enables multi-threaded subset of otf, ttf, and woff2 fonts, allowing for precise control over package size. (github.com)

格式转换

• ttf转woff2可利用上述两种方法，也可采用在线转换

1.TTF to WOFF2 | CloudConvert
2.在线字体转换,字体格式转换器|ttf转otf,ttf转woff,ttf转woff2,ttf转eot,ttf转svg,otf转ttf,otf转woff,otf转woff2,otf转eot,otf转svg,woff转ttf,woff转otf,woff转woff2,woff2转ttf,woff2转otf,woff2转woff,dfont转ttf,dfont转otf,pfa转ttf,pfa转otf,pfb转ttf,pfb转otf - 在线工具 - 字客网 (fontke.com)
3.字体转换器 (在线自由) — Convertio