最近在开发一个小程序，由于设计字体使用了外部字体：阿里巴巴普惠体，且字体包尺寸过大（10M+），导致小程序进入首页后字体包还没加载完，出现了字体闪动现象。
查阅资料后发现：目前对字体加载优化比较有效的方式有两种：使用 woff2 格式 + 字体切片
其中字体切片方案又分为：字体子集化、字体分包
字体子集化
概念：字体子集化是指将字体文件中的字符子集化，只保留文档中实际使用到的字符，从而减少字体文件的大小。
适用场景：文案直接由前端写死，不依赖后端接口进行动态变化。例如下图这种场景
我们可以使用 fontmin 实现：ecomfe.github.io/fontmin/
我是使用了客户端的方式进行实现：
生成的字体文件：
如果想要体积更小，可以根据下面的方法继续将文件转成 woff2 格式
字体分包
概念：将一个包含多个字体样式（例如不同粗细、斜体等）的字体文件拆分成多个单独的字体文件
适用场景：文案由后端返回。例如下图中纪念品名称和描述都由后端返回，我们提前不能得知页面会展示哪些内容
在线分包工具：chinese-font.netlify.app/online-spli...
可以看到，原来5.19M的字体包被拆分成了多个60kb左右的包
将压缩好的字体文件上传到 cdn + 将输出文件夹中的 result.css 文件放在我们项目中即可，注意改一下 url 的值
关于字体格式，以及如何转换想要的格式
字体格式和兼容性：
.ttf
TrueType，是mac系统和window系统用的最广泛的字体，一般从网上下载的字体文件都是ttf格式，点击就能安装到系统上。
.otf
OpenType，.ttf是.otf的前身，
.eot
Embedded Open Type，主要用于早期版本的IE除了IE以外的浏览器都不太支持。
.woff
Web Open Font Format，可以看作是ttf的再封装，加入了压缩和字体来源信息，通常比ttf小40%。是当前web字体的主流格式。
.woff2
Web Open Font Format 2.0，相比woff最大的优化应该是加强了字体的压缩比。相同字体内容下，woff2比woff要小20%到30%。
文件大小：woff2(*) < woff < ttf ≈ eot
结论：
- eot：IE系列专属字体方案，不推荐。
- ttf：兼容性好，但是字体文件较大 ，不推荐。
- woff：W3C标准，兼容性好，推荐。
- woff2：W3C标准，但是不兼容IE，推荐。
对比总结我们就会发现，尽管 .woff 文件由于历史原因，许多旧设备的浏览器并不支持，但是考虑当前兼容情况和文件大小的优势，在进行移动Web开发时，我们可以优先考虑使用.woff2，如果需要兼容更多的低版本设备，再考虑使用.woff。
在线字体格式转换工具：