Web Fonts (二) OTF/TTF 转 WOFF
程序员文章站
2022-03-26 23:12:47
...
将 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
安装
:~$ 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
转换为 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
:~$ 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_decompress wqy-zenhei.woff2
四、OTF/TTF/WOFF/WOFF2 体积汇总
| 名称 | 格式 | 压缩方式 | 字体体积 | 压缩率 |
|---|---|---|---|---|
| wqy-zenhei.ttf | TrueType | 11MB | 无 | |
| wqy-zenhei.woff | WOFF | zlib | 6.5MB | 40% |
| wqy-zenhei.woff | WOFF | zopfli | 6.3MB | 42% |
| wqy-zenhei.woof2 | WOFF2 | brotli | 5.0MB | 54% |
五、中文字体的压缩及使用
中文字体的困境
-
中文字体体积大
英文字体文字部分由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: