0%

Web Fonts (二) OTF/TTF 转 WOFF

征 途
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-toolssfnt2woff-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 下使用工具 woff2TTF/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、WOFFWOFF2 格式。

它所生成的 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:

---- The End Thanks ----
Donate if you like the article.