glyphhanger 优化字符集，生成子集化字体

由于ui的设计，页面中使用了一些小米的字体，需要单独下载字体文件，字体文件大概8m左右，页面在加载字体文件时，耗时较长，所以使用glyphhanger进行了优化，只保留使用到的字体，生成一个子集化的字体文件。

1. 安装glyphhanger：

# 首先安装 puppeteer，如果本地有chrome浏览器，可以直接安装 puppeteer-core，这样会好安装一些，安装之前，先设置镜像源：
yarn config set puppeteer_download_host https://npmmirror.com/mirrors
# 执行安装
yarn add puppeteer-core
# 安装字体文件处理工具
brew install fonttools
# 可以全局安装
yarn global add glyphhanger
# 但是由于默认的PATH变量，其实是没有 yarn global bin，安装后的 glyphhanger 是在 yarn global bin 下，执行这个命令可以得到具体的路径，将这个路径添加到 PATH 变量中，就可以正常使用 glyphhanger 命令

2. 使用 glyphhanger 生成子集化字体文件

# 如果前面安装的是 puppeteer，可以直接执行命令
glyphhanger --whitelist="http://localhost:3000" --subset Misans-Regular.ttf
# whitelist 就是需要保留的字符集，直接填写网址，将会自动扫描网址中使用的文字字体，
# subset 指定是对某一种字体进行子集化，可以写通配符，一次处理多个字体文件，
# 字体文件路径需要正确，可以 cd 到字体文件目录，也可以直接指定正确的路径

# 如果前面安装的是 puppeteer-core，执行命令的时候，需要指定 chrome 浏览器程序路径，其他和上面相同
glyphhanger --chrome="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --whitelist="http://localhost:3000" --subset Misans-Regular.ttf

3. 生成的子集字体文件
   最终生成的结果，包含三个文件，如图
   

• 三个文件的含义：
  • Misans-Demibold-subset.ttf（7.51KB）：传统 TrueType 字体格式，兼容性较好，但体积较大。
  • Misans-Demibold-subset.zopfli.woff（4.17KB）：WOFF（Web Open Font Format）支持IE9+ 及大部分现代浏览器，Zopfli 压缩比普通 WOFF 更小，有些老浏览器可能不支持。
  • Misans-Demibold-subset.woff2（3.08KB）：WOFF2（Web Open Font Format 2）是WOFF升级版

最终我是选择了 Misans-Demibold-subset.ttf，优化后，页面加载快了很多。