Web Fonts (2) OTF / TTF to WOFF

Posted on Edited on In , , Symbols count in article: 3.8k Reading time ≈ 3 mins.

Journey
When converting OTF / TTF fonts to WOFF online, many websites limit the size of uploaded fonts (< 10MB), while the size of Chinese fonts is inherently large, so when using online font format conversion, it is often not possible to convert. Then I thought about converting the fonts locally.

1、Backgroud

  • TTF (TureType)，A standard font type with the extension .ttf, developed by Apple and Microsoft in the 1980s (1980s).
  • OTF (OpenType), used to replace TTF fonts, was released in the late 1990s. Many more complex data structures were added to the TTF file structure, which strengthened the font’s glyph and language support capabilities. The extensions are .otf,.ttf,.ttc.
  • WOFF (Web Open Font Format Version 1)，the zlib/zopfli method is used to compress the font TTF/OTF, which greatly reduces the network traffic when the website transmits the font.
  • WOFF2 (Web Open Font Format Version 2)，Brotli method is used to compress the font, which has a higher compression ratio than WOFF, making the font smaller.

2. Convert OTF / TTF to WOFF

To convert the font TTF/[OTF][toc_wikipedia_oft] to WOFF on Linux, you can use woff-tools or sfnt2woff-zopfli directly.

woff-tools

Use the zlib compression method to generate WOFF.

Install

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

Convert to WOFF font

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

It can be seen from the above that the volume of wqy-zenhei.woff is reduced by about 40% compared to wqy-zenhei.ttf.

WOFF to TTF / OTF

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

sfnt2woff-zopfli

Use zopfli method to generate WOFF fonts.

Convert to 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

As can be seen from the above, wqy-zenhei.woff is about 42% smaller than wqy-zenhei.ttf.

Convert to TTF/OTF

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

3. Convert TTF / OTF to WOFF2

woff2

Use woff2 In Linux convert TTF/OTF to WOFF2.

1
:~$ sudo apt-get install woff2

woff2_compress

Convert TTF/OTF to 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

Looking at the above, wqy-zenhei.woff2 is about 54% smaller than wqy-zenhei.ttf.

woff2_decompress

Convert WOFF2 to TTF/OTF.

1
:~$ woff2_decompress wqy-zenhei.woff2

4、Summary of OTF/TTF/WOFF/WOFF2’s size

Name Format Method Size Compression ratio
wqy-zenhei.ttf TrueType 11MB none
wqy-zenhei.woff WOFF zlib 6.5MB 40%
wqy-zenhei.woff WOFF zopfli 6.3MB 42%
wqy-zenhei.woof2 WOFF2 brotli 5.0MB 54%

5. Compression and use of Chinese fonts

中文字体的困境

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

Solution

从以上的问题可知中文字体要解决的问题就是压缩、转码。所以 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: