字体压缩策略

852 阅读1分钟

初始

image.png image.png

转为woff2

EOTTTFWOFF 格式大于 WOFF 2.0EOTTTF 完全不需要使用,如果需要支持 Internet Explorer 11,则可以接受 WOFF 格式。如果只针对新型浏览器,则仅使用 WOFF 2.0 是最简单且性能最佳的选择。

随便找了个线上压缩站点,将其压缩并转化为woff2

image.png

image.png

这样即可从1.4MB转为632KB了

字体拆分

接下来可以继续拆分,使用字体中文网可以做简单差分并且查看字体中包含的内容

image.png

选择包含英文和数字的模块引入

image.png

image.png

这样即可从1.4MB转为11KB了

字体按需拆分

经过上面的拆分,字体已经变得非常小了,但是还是存在差分的包无法具体控制的问题(比如上面的【测试】字体就失效了)。咱们继续压缩。

使用font spider

按照文档的操作,输入font-spider dest/*.html, 对需要打包的html文件进行检测压缩。(@font-face 中的 src 定义的 .ttf 文件必须存在)

image.png

image.png

成功了,所有字体样式都生效了,咱们使用字体中文网看看这个字体文件的内容:

image.png

非常完美,只有我们页面中引入的字体内容了!!

这样即可从1.4MB转为1.9KB了

这个不方便的问题就是只能静态检测html,每次html变化后需要重新拆分字体,不过也无伤大雅,可以写个脚本客服。

参考文档

  1. web.dev/articles/re…
  2. github.com/KonghaYao/c…
  3. github.com/aui/font-sp…