现在大家开发门户站点都喜欢用一些特定字体，使其更独特更美观，我也是这么想的。于是我用vue-cli 自己创建了一个项目，在其中引入字体文件后，问题大发了：
字体文件太大了，我引用的方正准圆简体 有3M。发布之后的要加载很长一段时间页面才会看到字体变化，太影响性能和用户体验。
解决方案
必须压缩字体
怎么压缩？
我在网上看到两种解决方法，但只有第二种可行，下面我们一一道来，诸位请看：
1. font-spider 这个用不了
对于vue-cli 创建的项目，亲测不可行，为啥呢？大家仔细看font-spider 官网的这句话
字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。
所以它是提取css文件和html文件里的字符再压缩的。但vue-cli build 之后的部署文件是下面这个样子的：
image.png
我们看唯一的一个html文件：
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<link rel=icon href=/favicon.ico> <title>officialsite</title>
<link href=/css/app.9e34393c.css rel=preload as=style>
<link href=/js/app.9bca0ae9.js rel=preload as=script>
<link href=/js/chunk-vendors.6051b49a.js rel=preload as=script>
<link href=/css/app.9e34393c.css rel=stylesheet>
</head>
<body>
<noscript><strong>We're sorry but officialsite doesn't work properly without JavaScript enabled. Please enable
it to continue.</strong></noscript>
<div id=app></div>
<script src=/js/chunk-vendors.6051b49a.js> </script>
<script src=/js/app.9bca0ae9.js> </script>
</body>
</html>
我们会发现，需要渲染的东西都是通过js文件来动态加载的，所以font-spider 根本无法捕获 js里的字符，自然也无法优化了！
好大一个坑!!!
2. fontmin 这个可以用！！！
首先，下载软件 http://ecomfe.github.io/fontmin/#app：
image.png
安装完成后，按照图示将你需要的字体添加进去就可以了：
image.png
之后就可以生成你需要的字体文件了！
