初始
转为woff2
EOT、TTF 和 WOFF 格式大于 WOFF 2.0。EOT 和 TTF 完全不需要使用,如果需要支持 Internet Explorer 11,则可以接受 WOFF 格式。如果只针对新型浏览器,则仅使用 WOFF 2.0 是最简单且性能最佳的选择。
随便找了个线上压缩站点,将其压缩并转化为woff2
这样即可从1.4MB转为632KB了
字体拆分
接下来可以继续拆分,使用字体中文网可以做简单差分并且查看字体中包含的内容
选择包含英文和数字的模块引入
这样即可从1.4MB转为11KB了
字体按需拆分
经过上面的拆分,字体已经变得非常小了,但是还是存在差分的包无法具体控制的问题(比如上面的【测试】字体就失效了)。咱们继续压缩。
按照文档的操作,输入font-spider dest/*.html, 对需要打包的html文件进行检测压缩。(@font-face 中的 src 定义的 .ttf 文件必须存在)
成功了,所有字体样式都生效了,咱们使用字体中文网看看这个字体文件的内容:
非常完美,只有我们页面中引入的字体内容了!!
这样即可从1.4MB转为1.9KB了
这个不方便的问题就是只能静态检测html,每次html变化后需要重新拆分字体,不过也无伤大雅,可以写个脚本客服。