关于小程序优化字体文件体积的一种不太优雅的方案

小程序中，首页使用到了第三方特殊字体，最开始的开发人员用的是图片，后来重构首页的时候，我给换成了第三方字体文件，但是一开始忽略了字体文件的体积，这个TTF格式的字体文件体积高达2.6M，加载需要2s+，在移动端，这个是不能被容忍和接受的，于是开始查询解决方案。

网上的方案，大多数推荐的有：

• 字蛛 : 可以自动分析出页面使用的 webfont 进行压缩
• fontmin: 可以通过制定文本进行压缩
• fonttools: 定制性更强的压缩工具 以上三种方案的优缺点对比，详见 中文字体压缩的那些事

但是最终我的方案是把页面上主要用到的字抽取出来，来减小特殊字体的文件体积。主要步骤如下：

在一个transfonter上传原字体文件，选择要生成的字体文件的格式，然后在characters这个输入框中输入自己页面用到的字符，然后点击convert按钮，转换完之后，点击download下载处理过的字体文件。

因为我们勾选了TFF、WOFF、WOFF2三种格式的字体文件，所以，下载下来的字体压缩包会包含这三种字体文件。关于这三种字体格式的大小以及区别，具体可参考：TTF、OTF、WOFF 和 WOFF2 的相关概念

🚩 我们就把原本2.6M的一个字体文件，通过定制化，只抽出用到的字符，把字体文件大小压缩到了6KB。

然后我们把下载下来的文件上传至CDN，在css文件中的使用方式如下：

@font-face {
    font-family: 'LangZheng';
    src: url('https://xxx.xx.com/subset-LANGZHENGTI-SB--GBK1-0.woff2') format('woff2'),
        url('https://xxx.xx.com/subset-LANGZHENGTI-SB--GBK1-0.woff') format('woff'),
        url('https://xxx.xx.com/subset-LANGZHENGTI-SB--GBK1-0.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


.text {
    font-family: 'LangZheng'
}

然后再来看下效果：

从上图，我们可以看出加载速度也从原来的2s+，缩短到了45ms，有效提升了字体文件的加载速度。

总结：但是此方案仅适用于限定某些字符，相比使用图片，这个文件大小更小，但是因为我们只定制了用到的文字，所以不够灵活，不适用于页面文字较多且无限变化的文字。