将 OTF/TTF 字体在线转换为 WOFF 时，好多网站都限制了上传字体的体积 (<10MB)，而中文字体体积本来就大，所以使用在线字体格式转换时，经常无法转换。遂想着将字体在本地进行格式转换。
一、背景
TTF (TureType)，由苹果公司与微软公司在上世纪 80 年代 (1980s) 共同开发的字体类型标准，扩展名为.ttf。OTF (OpenType)，用于替代 TTF 字体，于上世纪 90年代末发布，在 TTF 文件结构的基础上添加了许多更加更加复杂的数据结构，加强了字体的字形和语言支持能力。扩展名为.otf、.ttf、.ttc。WOFF (Web Open Font Format Version 1)，通俗的来讲就是使用 zlib/zopfli 方法将字体 TTF/OTF 进行了压缩，大大减少了网站传送字体时的网络流量。WOFF2 (Web Open Font Format Version 2)，使用 Brotli 方法来压缩字体，比 WOFF 压缩率更高，使得字体体积更小。
二、将 OTF/TTF 转换为 WOFF
在 Linux 上要将字体 TTF/OTF 转换为 WOFF，可以直接使用 woff-tools 或 sfnt2woff-zopfli 来完成。
woff-tools
使用 zlib 压缩方法来生成 WOFF。
安装
:~$ sudo apt-get install woff-tools
转换为 WOFF 字体
:~$ sfnt2woff wqy-zenhei.ttf && ls -lah wqy-*
-rw-r--r-- 1 root root 11M Jun 25 2008 wqy-zenhei.ttf
-rw-r--r-- 1 root root 6.5M Oct 31 22:24 wqy-zenhei.woff
由上可见，wqy-zenhei.woff 的体积比 wqy-zenhei.ttf 缩减了约40%。
将 WOFF 转换为 TTF/OTF
:~$ woff2sfnt wqy-zenhei.woff > wqy-zenhei.ttf
sfnt2woff-zopfli
使用 zopfli 压缩方法来生成 WOFF 字体。
转换为 WOFF
:~$ sfnt2woff-zopfli wqy-zenhei.ttf && ls -lah wqy-*
-rw-r--r-- 1 root root 11M Jun 25 2008 wqy-zenhei.ttf
-rw-r--r-- 1 root root 6.3M Oct 31 22:36 wqy-zenhei.woff
由上可见，wqy-zenhei.woff 体积比 wqy-zenhei.ttf 缩减了约 42%。
转换为TTF/OTF
:~$ woff2sfnt-zopfli wqy-zenhei.woff > wqy-zenhei.ttf
三、将 TTF/OTF 转换为 WOFF2
woff2
Linux 下使用工具 woff2 将 TTF/OTF 转换为 WOFF2 字体。
:~$ sudo apt-get install woff2
woff2_compress
将 TTF/OTF 转换为 WOFF2 字体。
:~$ woff2_compress wqy-zenhei.ttf && ls -lah wqy-*
-rw-r--r-- 1 root root 11M Jun 25 2008 wqy-zenhei.ttf
-rw-r--r-- 1 root root 5.0M Oct 31 22:44 wqy-zenhei.woff2
由上可见， wqy-zenhei.woff2的体积比 wqy-zenhei.ttf 缩减了约 54%。
woff2_decompress
将 WOFF2 转换为 TTF/OTF 字体。
:~$ woff2_decompress wqy-zenhei.woff2
四、OTF/TTF/WOFF/WOFF2 体积汇总
名称格式压缩方式字体体积压缩率
wqy-zenhei.ttfTrueType11MB无wqy-zenhei.woffWOFFzlib6.5MB40%wqy-zenhei.woffWOFFzopfli6.3MB42%wqy-zenhei.woof2WOFF2brotli5.0MB54%
五、中文字体的压缩及使用
中文字体的困境
中文字体体积大 英文字体文字部分由26个字母组成，所以字体文件通常不会太大，体积以 KB 为单位。而中文汉字数量总共约有九万左右， 国标(GB)字库 有6763字, 而根据《现代汉语常用字表》统计数据，常用汉字也要有3500个左右。所以中文字体的体积都是以 MB 为单位，显然不适合在网页端使用。浏览器支持 不同的浏览器对字体格式的支持也是各不相同。这就要求我们针对不同的浏览器制作不同的字体。
解决方法
从以上的问题可知中文字体要解决的问题就是压缩、转码。所以 front-spider 就是为解决此问题而生。
font-spider
font-spider 通过分析本地 CSS 与 HTML 文件来获取本地字体及网页所使用的汉字，将无用的字符数据从中文字体文件 (TTF/OTF) 中删除，重新生成中文字体文件 TTF/OTF、WOFF、WOFF2 格式。
它所生成的 TTF 文件体积单位由原来的 MB 缩减为 KB，极大的减少了字体传输的网络流量。
安装
先安装 NodeJS，如何安装详见 NodeJS 的安装
:~$ npm -g install font-spider
使用方法
CSS 中声明引用中文字体
@font-face {
font-family: 'wqy';
src: url('../font/wqy-zenhei.woff2') format('woff2'),
url('../font/wqy-zenhei.woff') format('woff'),
url('../font/wqy-zenhei.ttf') format('truetype');
font-weight: normal
;
font-style: normal
;
}
运行 font-spider 命令
# 备份 ttf 字体
:~$ font-spider /var/www/*.html && ls -lah wqy-*
-rw-r--r-- 1 root root 359k Jun 25 2008 wqy-zenhei.ttf
-rw-r--r-- 1 root root 359K Oct 29 10:40 wqy-zenhei.woff
-rw-r--r-- 1 root root 220K Oct 29 10:40 wqy-zenhei.woff2
# 不备份 ttf 字体
:~$ font-spider --no-backup /var/www/*.html && ls -lah wqy-*
-rw-r--r-- 1 root root 11M Jun 25 2008 wqy-zenhei.ttf
-rw-r--r-- 1 root root 359K Oct 29 10:40 wqy-zenhei.woff
-rw-r--r-- 1 root root 220K Oct 29 10:40 wqy-zenhei.woff2
References:
shixuen.comWeb Fonts (一)Install NodeJSWiki PediaMagiclenfont-spiderwenq.org
