网络字体包压缩优化方案

本文将介绍如何缩小网络字体包大小及优化其加载过程。

优化思路#

将字体包转换为 woff2 格式。它具有更小的体积，对现代浏览器非常友好，且无需再 gzip 压缩。
使字体包中仅保留英文、数字、常用字符和常用汉字。
使用非堵塞方式加载字体包。

QA#

1、TTF 如何转换为 WOFF2？#

使用fonttools 转换格式。它是一个依赖于 python 的工具。（若转换时候报错，需要根据提示安装对应依赖的库。）

（1）安装：

pip install fonttools

（2）转换例子：

pyftsubset example.ttf --layout-features="" --unicodes=U+0020-007E,U+4E00-9FA5 --flavor=woff2 --output-file=example.woff2

注意到 –unicodes=U+0020-007E,U+4E00-9FA5，其中 U+0020-007E 为 ascii 码范围，U+4E00-9FA5 为基本汉字范围（大约 2 万字）。

2、字体包中如何仅导出所需的常用字符？#

使用font-spider 导出。

Github 中有一个这样的常用汉字频率表。

3、如何非堵塞加载字体包#

css 示例：

@font-face {
    font-family: 'example-font';
    src: url('./example.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    /* 使用 swap 模式，为字体提供一个非常小的阻塞周期。 */
    font-display: swap;
}