纯前端字体文件优化实践，字体文件压缩93%!

背景

高保真数据可视化大屏页面，设计部同学在提供UI图的同时还会提供UI图中使用到的字体文件，例如：思源字体、微软雅黑等类型的字体。前端需要在CSS中定义自定义字体即可和UI图字体保持一致。但是，通常来说UI提供的字体包都很大，大都在十几M，加载非常缓慢，严重影响用户体验。toB产品没有CDN，只能从字体文件本身去做优化操作。

优化策略：

1. 使用压缩率更高的字体类型（推荐woff2格式）。
2. 删除生僻字以及不常见的特殊字符。

基础环境

为了避免因为基础环境不一致而产生意料之外的问题，基础环境要尽可能保持一致。

依赖	版本	说明
node.js	14.21.2	推荐14lts
@hayes0724/web-font-converter	1.0.5	常见字体转换
font-spider	1.3.5	过滤字体数据
ttc2ttf	1.0.96	ttc转ttf格式，@hayes0724/web-font-converter的补充工具。

安装压缩工具

npm install -g font-spider ttc2ttf @hayes0724/web-font-converter

字体文件转换为ttf格式

源文件：思源黑体.otf

font-spider 只压缩ttf格式的字体文件，所以要先将otf转ttf

如果源字体文件是 ttc 格式则可以通过 ttc2ttf 转为 ttf 格式

1. # 源字体文件 otf 格式
2. font-convert --pathIn='./SourceHanSansCN-Bold.otf' --pathOut='./SourceHanSansCN-Bold.ttf'
4. # 源字体文件 ttc 格式
5. # 在 msyhsb001.ttc 文件目录下执行
6. ttc2ttf ./msyhsb001.ttc ./

压缩字体文件

字体文件体积大的原因主要是中文有上万个字体，可是常见的中文字体只有3000个左右，删除特殊字符以及生僻字，可以大大减小字体文件的体积。

1. # 新建 font.html
2. # 在 div.text3 元素中添加常见字体
3. # 执行以下命令
4. font-spider ./font.html
6. # 输出结果可查看字体已经被压缩切大小只有 1039.424 KB

ttf格式转woff2格式

源文件大小8.6M，经过删除生僻字以及转为woff2格式后文件大小为552KB。

font-convert --pathIn='./SourceHanSansCN-Bold.ttf' --pathOut='./SourceHanSansCN-Bold.woff2'

验证

从上图可以看出，字体压缩比确实是高达93%，对比网络加载速度，同样6M带宽字体文件由原来的18s到目前的500ms，用户访问网页带来飞升一般的体验。