背景
在项目里，设计稿这边使用了"思源"的字体-SourceHanSerifSC-Heavy。于是就把用到的字体Heavy.otf引进项目，但是最后发现字体大小达到了 21.8MB，首次加载时间为6秒，体验不佳，需要对字体包进行优化。
解决方法
网上查阅，字体包压缩通过font-spider实现。
font-spider通过分析本地的CSS与HTML文件获取字体中没有使用的字符，并把这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。
- 全局安装font-spider
npm i font-spider -g
- 复制代码，新建一个项目，或者使用目前正在做的项目；
目录结构：
index.html中应用该字体：
@font-face {
font-family: SourceHanSerifSC;
src: url("./source/SourceHanSerifCN-Heavy.otf");
}
- cmd进入test项目文件夹，执行如下命令：
font-spider index.html
如果多个html文件中均引用该字体，则执行如下命令：
font-spider *.html
命令执行查看结果，并没有像网上讲的字体包被压缩，大小未变化。所以关键点来了，使用font-spider压缩的字体包必须为ttf类型。
- otf转ttf
关于otf转ttf的教程很多，常用的使用工具有 FontCreator（使用这个的较多）, FontLab Studio, FontForge，我这里没有安装自己去转换，有人已经做好了转换，并把字库放在了 GitHub 上面，在此分享一下：
- 使用font-spider对ttf字体包进行压缩提取。
将字体包以及html的引用更换好之后，再次执行font-spider *.html命令，命令执行结果：
文件中执行结果：
字体包从原来的12794.548KB压缩为90.452KB，且测试后字体效果生效。因为它把多余的文字去掉了，只提取我们页面出现的那些文字。
优缺点
优点：
如上，字体包体积被优化，加载性能提升；
缺点：
font-spider虽然好用，但是由于其原理是直接分析本地 CSS 与 HTML 文件获取没有WebFont中没有使用过的字符，这样一来,对于动态生成的文字，就没有办法使用font-slider了。
尤其在当下，很多框架都是数据驱动的，更是很多文字都不会直接出现html文件中。对于框架的话，font-spider就不能适用了。
对于目前我这种没使用框架的情况，如果后面有新增的html使用了思源宋体或者原html中某个位置新增思源宋体的使用的话，需要再次执行下font-spider *.html命令，字体包中将新增的文字加进去。
