前端开发使用第三方字体文件并使用 fontmin 进行压缩

使用第三方字体文件

1. 首先把第三方字体文件放到项目中来。

2. 创建一个 font.less 文件，文件里面通过 @font-face 指定字体名称和第三方字体文件路径。

// font.less
@font-face {  
    font-family: 'AlibabaPuHuiTiB';  //重命名字体名
    src: url('../fonts/Alibaba-PuHuiTi-Bold.ttf');  //引入字体
    font-weight: normal;  
    font-style: normal;  
}

3. 在需要的地方进行使用

搞定，字体变成了我们想要的样子。

使用 fontmin 对字体文件进行压缩

字体成功引入以后，我又面临一个问题：
这个字体文件有 6M 这么大，在页面加载时会浪费过多的网络资源，影响页面加载速度，怎么办？
好家伙，字体文件大那就压缩呗。
说干就干，首先尝试了 font-spider，不能满足需求。因为 font-spider 是通过在静态文件中抽取文字进行压缩的，VUE 项目里相关的页面是动态加载出来的，不能抽取到相关文字。那就再换一种方案，最终，决定使用 fontmin 来压缩。步骤如下：

1. 下载客户端

在这个链接中找到下载地址 http://ecomfe.github.io/fontm...

2. 输入要使用的文字，生成精简版字体文件

这里需要先上传原来的字体文件（就是 size 很大的那个），输入需要使用的文字，再点击生成就OK了。

最后，替换掉之前的字体文件，大功告成。字体文件从6M 减少到几十K，网页加载速度起飞。但是这种方案只能针对我们开发者已经知道哪些确切的文字需要换字体进行处理，例如网页的一些title，对于从后台返回的文字还是无能为力。