使用font-spider解决ttf文件过大问题

背景

在捣鼓个人网页时，有个模块的字体看着不是那么好看，便找了个觉得看着顺眼的字体下载了放在项目中，字体是变了，但是首次加载时，资源加载时间竟然超过了1分钟，对于带宽只有1M的云服务器（试用）来说可谓是雪上加霜。主要是这个ttf文件有接近10M，太大了，即使用nginx进行了一道压缩，总归治标不治本。所以如何处理ttf文件在低带宽下也能快速加载是当前的主要任务

先放一个处理结果对比

ttf文件由最开始的9.7MB变成了19kB

nginx开启gzip

优化资源大小肯定第一想到的就是gzip压缩了，这也是比较快速就可以实现的，只需要在nginx.conf文件中配置gzip压缩即可。这里我只是写了几个配置，超过1k的才压缩并且我的文件目前类型不多，所以我用*压缩所有文件，在实际开发中肯定是需要指定类型的。gzip配置是写在http下的

gzip   on;
gzip_min_length  1k;
gzip_types *;
gzip_vary  on;

ttf文件瘦身

一个接近10M的文件在网络上传输对于一些公司项目来说也是颇具压力的。所以如何缩减文件体积就是个问题。其实这个问题有点像echarts，有时候只是要用折线图和柱状图，但是却要引入整个echarts，确实是臃肿累赘。后来也就有了按需引入。举一反三，若是只需要引入需要显示的文字的字体数据，将多余的无用的文字去除，是不是就可以了。

font-spider

在不知道如何处理的时候，就需要搜索引擎了。我们在Google一搜，便发现有这么一个东西font-spider，可以将所需要的文字从源ttf文件中抽取出来生成一个新的字体文件。按照MD文档步骤进行安装使用

注意：font-spider处理的文件必须是静态html文件，框架路径不会进行压缩。所有需要的文字都需要写在这个html中，否则无效生效（这点也是比较受限的一点，若是很多的模块然后模块中有很多零散的文字，难道都要收集起来放到html中嘛！！）

首先先全局安装一下

npm install font-spider -g

再在控制台执行

font-spider 目标.html

该步操作后就会在ttf文件的文件路径下生成一个font文件夹，文件夹中存放的是源ttf文件，而代码中引用的ttf则会自动替换成压缩后的ttf文件，后续直接打包就行。

总结

首先，这种压缩ttf文件的方式的使用场景还是比较受限，对于现在框架开发的项目，用起来就比较麻烦了。
其次对于现在的企业项目，这种压缩ttf的方式其实有点隔靴搔痒，浏览器不仅有缓存，资源也可以进行预加载，种种方式都可以进行优化，而且服务器带宽肯定不会这么小，此次仅仅是应对小带宽的试用云服务器，本着强迫症的本性，不想要忍受在首次加载时过慢的问题。

此次问题的解决，和实际项目开发中解决问题的思路大致相同。1先定位问题，分析原因、2确定解决方案，可能不止一个解决方案，根据场景进行选择、3动手解决

本文借此也是做简单的做一个记录，若是有其它方案欢迎大家可以一起来探讨。