字体文件压缩/裁剪/精简/瘦身方法

中文字库通常体积很大，尤其是包含了各种生僻字、日文、韩文等字符，但实际项目上基本用不到。所以通常需要对字体进行压缩/裁剪/精简/瘦身来优化前端加载速度和性能（例如在移动端使用 modern-screenshot 进行截图时，中文字体太大读入内存时通常会导致页面白屏崩溃）。

CC（知识共享许可协议）: BY（署名）-NC（非商业性）-SA（相同方式共享）

主流方案有2种

1. 动态生成：根据页面内容动态生成裁剪后的字体并缓存，例如：

vite-plugin-font

An automatic Web Font optimization plugin that supports many platforms such as Vite, Next, Nuxt, and more.. Latest version: 5.1.2, last published: 17 days ago. Start using vite-plugin-font in your project by running `npm i vite-plugin-font`. There is 1 other project in the npm registry using vite-plugin-font.

npm

2. 静态文件：提前按一定文字范围处理好，例如选用我国颁布的《通用规范汉字表》的常用字。通常可以将 思源黑体 这种百兆字体压缩到几MB。

通用规范汉字表

通用规范汉字表，共收字8105个。其中一级字表（常用字集）3500个，二级字表3000个，三级字表1605个。是重要的汉字使用规范。

汉语国学·汉语字典

本文主要介绍第2种方案

基础环境准备

如果你的电脑环境有 NodeJS 和 Python，则运行命令安装依赖：

pip3 install --no-cache-dir fonttools brotli zopfli
npm install -g glyphhanger

不过这种需求大部分是前端的工作，所以基本不会有 python 环境。所以我的方案是在 Docker 容器中创建环境来处理，由于 Docker 是一个更通用化、复利性更好的技术栈，所以如果以上任意环境都没有，我也更推荐 Docker。

在空文件中，创建 dockerfile 文件，粘贴内容：

FROM node:20-bullseye
RUN apt-get update && \
    apt-get install -y --no-install-recommends \
    python3-pip python3-setuptools python3-wheel git curl && \
    rm -rf /var/lib/apt/lists/*
RUN pip3 install --no-cache-dir fonttools brotli zopfli
RUN npm install -g glyphhanger
WORKDIR /workspace
CMD [ "bash" ]

cd 进入 dockerfile 所在目录，然后执行命令构建镜像：

docker build -t docker-font-subset:latest .

启动镜像环境：

docker run --rm -v ./:/workspace -it docker-font-subset:latest

将你要处理的字体文件，复制到当前文件夹即可进入下一步。后续需要再次处理字体时，只需要直接启动镜像即可，不需要重复构建步骤。

处理字体

创建 charset.txt 在其中写入你希望保留的字符（可从通用规范汉字表中复制你需要的文字，也可在附件中下载我提前编辑好的字集 txt）：

一乙二十丁厂七卜八人入儿匕几九刁了刀力乃又三干于亏工土士才下寸

执行命令：

glyphhanger --subset=字体文件名.ttf --whitelist="$(cat charset.txt)" --formats=woff2

--formats 参数也可以更改为其他格式，但是 woff2 有最好的压缩率。

处理完成的字体将会输出到当前目录，文件名中会包含 subset。

附件

包含：通用规范汉字表：一级（3500字）、二级（3000字）、三级（1410字）