字体文件大小压缩指南

思路

字体渲染原理

在前端开发中，TTF和WOFF2等字体文件在浏览器中的渲染机制是按单个字符（字形）进行渲染的，而不是对整个字符串进行整体处理。
字体文件包含了一系列独立的字形数据，每个字符都对应着特定的字形信息。当浏览器解析文本内容时，会根据字符编码逐个查找字体文件中对应的字形数据，然后进行渲染显示。
浏览器通过@font-face规则加载字体文件后，会建立字符编码与字形数据之间的映射关系。渲染过程中，文本被拆分为独立的字符单元，每个字符都通过查找字体文件中的字形信息来独立渲染

性能优化策略

由于中文字体包含数万个字符，全量加载会显著增加文件体积和加载时间。因此我们需要从全量字体包中分离出我们真正需要的字体集。

步骤

1. 获取前端项目所需要的所有文案

中文：项目中所需要的中文
英文：A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z
数字：0123456789
常用符号：·！@#￥%……&*（）——+~!{}|[];',./；‘’，。、“”"-<>?？_=《》：:

2. 下载字体子集化工具代码

仓库：https://github.com/BoaleH/font-subset
分支：master

3. 把charset.txt和字体文件按照工具readme说明进行放置

4. 执行打包获取子集化后的字体文件

npm run build

5. 预览子集化后的字体文件样式

6. 效果

可以看到前后大小对比，大小差异非常明显

7. 字体文件预加载

<linkrel="preload"href="https://c-smart5-zitiku.oss-cn-hongkong.aliyuncs.com/font/AlibabaSansHK/AlibabaSansHK-55/AlibabaSansHK-55.woff2"as="font"type="font/woff2"crossorigin
/>

字体文件子集化之后就不会有那么大了，实际上可以不加。除非字体文件很大，才需要做预加载

9. 更新频率

由于字体子集化文件我们是依据此刻所需要的文字进行转换的，未来随着业务开发，会需要更多的新字符，因此需要每个月末都需要找后端要最新的国际化文案，重新执行一次字体子集化，以此更新字体文件的字符。

10. 字体文件推荐格式

浏览器推荐woff2，所以尽量使用woff2字体包

11. 在线工具

如果不想用代码跑，也可以用这两个在线工具。但是我建议用代码跑，能批量、能去重。

压缩工具：https://ecomfe.github.io/fontmin/#app
woff2转换工具：https://transfonter.org/