skip to content
usubeni fantasy logo Usubeni Fantasy

CJK 字体文件压缩方案

/ 4 min read

主方案

人生苦短,我用 python

主方案我们用 python 的 fonttools 解决问题。

genSubset.sh
#!/bin/bash
fonttools subset "./src/assets/fonts/font.woff2" --text-file="./subset.txt" --output-file="./src/assets/fonts/subset-font.woff2"
fonttools ttLib.woff2 compress "./src/assets/fonts/subset-font.woff2" -o "./src/assets/fonts/min-subset-font.woff2"
rm -rf ./src/assets/fonts/subset-font.woff2

subset.txt 就是一个常用汉字子集,例子可以看这个 gist

操作步骤如下:

  • 安装 python3
  • pip3 install fonttools
  • pip3 install brotli(压缩功能会用到)
  • 运行 genSubset.sh
  • 完结撒花,十分简单
  • 遇到反馈说某个字字体丢失,只要在 subset.txt 添加该字再重复以上步骤即可

如果你还是不想用 python,坚持 Node 的话,以下提供两个方案供参考。

方案 2:字蛛

当然,其实把所有常见汉字包进去其实是一种偷懒,但是不能否认这是十分高效的做法。

把字体文件极致压缩到只包含你的网站使用到字也是可能的,甚至在现在还简单一点,因为 SSR 又起来了(如果是 SSG,那就更是简单),以前 SPA CSR 是真的不方便。

这样的极致压缩方案其实早就有了,那就是八年前的“远古”项目字蛛。可惜现在的 Node 应该是不能正常运行了,得故意为压缩字体 nvm 一下。

方案 3:fontkit

其实用 py 主方案的时候我就觉得,这样的操作在 Node 应该也有替代方案,今天找了找,大概 fontkit 也是可行的。(没有实际使用过,仅提供信息)

在线方案 1:带 UI 的子集生成工具

在线生成字体子集,原理还是跟主方案差不多,不过不用装 python 也不用写代码了,直接给你提供 UI,把子集字符贴进去点一下生成就可以了。虽然是在线工具,但是实际上不会上传你的字体和子集字符,都是纯前端操作,无隐私问题。

在线方案 2:中文网字计划

使用中文网字计划提供的在线分片工具,子集不满足需求的情况下可以使用。原理是把完整的 CJK 字体拆成 50 到 70 kb 的小文件再按需加载,实际上页面上使用的字体很可能只需要少数包即可完整渲染。但跟上面子集的区别是这是完整字体的拆分,所以这种方法保证了少数情况下生僻字的正常渲染,在 HTTP/2 并行下载的加持下更爽。

而且这个站点是开源的,你也可以直接安装 npm 包用 node 进行字体操作。

评论组件加载中……