网络字体包压缩优化方案

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


优化思路#

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

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;
}

©Cadunico Labs 2008 - 2022