Web Fonts (二) OTF/TTF 转 WOFF

发表于 更新于 分类于 ， ， 本文字数： 3k 阅读时长 ≈ 3 分钟

征 途
将 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。

安装

1
:~$ sudo apt-get install woff-tools

转换为 WOFF 字体

1
2
3
:~$ 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

1
:~$ woff2sfnt wqy-zenhei.woff > wqy-zenhei.ttf

sfnt2woff-zopfli

使用 zopfli 压缩方法来生成 WOFF 字体。

转换为 WOFF

1
2
3
:~$ 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

1
:~$ woff2sfnt-zopfli wqy-zenhei.woff > wqy-zenhei.ttf

三、将 TTF/OTF 转换为 WOFF2

woff2

Linux 下使用工具 woff2 将 TTF/OTF 转换为 WOFF2 字体。

1
:~$ sudo apt-get install woff2

woff2_compress

将 TTF/OTF 转换为 WOFF2 字体。

1
2
3
:~$ 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 字体。

1
:~$ 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%

五、中文字体的压缩及使用

中文字体的困境

  1. 中文字体体积大
    英文字体文字部分由26个字母组成，所以字体文件通常不会太大，体积以 KB 为单位。而中文汉字数量总共约有九万左右， 国标(GB)字库 有6763字, 而根据《现代汉语常用字表》统计数据，常用汉字也要有3500个左右。所以中文字体的体积都是以 MB 为单位，显然不适合在网页端使用。
  2. 浏览器支持
    不同的浏览器对字体格式的支持也是各不相同。这就要求我们针对不同的浏览器制作不同的字体。

解决方法

从以上的问题可知中文字体要解决的问题就是压缩、转码。所以 front-spider 就是为解决此问题而生。

font-spider

font-spider 通过分析本地 CSS 与 HTML 文件来获取本地字体及网页所使用的汉字，将无用的字符数据从中文字体文件 (TTF/OTF) 中删除，重新生成中文字体文件 TTF/OTF、WOFF、WOFF2 格式。

它所生成的 TTF 文件体积由原来的 MB 缩减为 KB，极大的减少了字体传输的网络流量。

安装

先安装 NodeJS，如何安装详见 Install NodeJs 

1
:~$ npm -g install font-spider

使用方法

  1. CSS 中声明引用中文字体
    1
    2
    3
    4
    5
    6
    7
    8
    @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;
    }
  2. 运行 font-spider 命令
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    # 备份 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: