vue-cli 创建的项目，引用的字体文件如何优化？（font-spider 和 fontmin）

现在大家开发门户站点都喜欢用一些特定字体，使其更独特更美观，我也是这么想的。于是我用vue-cli 自己创建了一个项目，在其中引入字体文件后，问题大发了：

字体文件太大了，我引用的方正准圆简体 有3M。发布之后的要加载很长一段时间页面才会看到字体变化，太影响性能和用户体验。

解决方案

必须压缩字体
怎么压缩？
我在网上看到两种解决方法，但只有第二种可行，下面我们一一道来，诸位请看：

1. font-spider 这个用不了

对于vue-cli 创建的项目，亲测不可行，为啥呢？大家仔细看font-spider 官网的这句话

字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。

所以它是提取css文件和html文件里的字符再压缩的。但vue-cli build 之后的部署文件是下面这个样子的：

image.png

我们看唯一的一个html文件：

我们会发现，需要渲染的东西都是通过js文件来动态加载的，所以font-spider 根本无法捕获 js里的字符，自然也无法优化了！
好大一个坑!!!

2. fontmin 这个可以用！！！

首先，下载软件 http://ecomfe.github.io/fontmin/#app：

image.png

安装完成后，按照图示将你需要的字体添加进去就可以了：

image.png

之后就可以生成你需要的字体文件了！