使用第三方字体文件

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. 在需要的地方进行使用

<style scoped lang="less">
@import url('~assets/css/font.less');
 .title {
        font-family: AlibabaPuHuiTiB;
  }
</style>

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

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

字体成功引入以后，我又面临一个问题：
这个字体文件有 6M 这么大，在页面加载时会浪费过多的网络资源，影响页面加载速度，怎么办？
好家伙，字体文件大那就压缩呗。

说干就干，首先尝试了 font-spider，不能满足需求。因为 font-spider 是通过在静态文件中抽取文字进行压缩的，但 VUE 项目里相关的页面是动态加载出来的，结果就不能抽取到相关文字。那就再换一种方案，最终，决定使用 fontmin 来压缩。步骤如下：

1. 下载客户端

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

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

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

最后，替换掉之前的字体文件，大功告成。字体文件从6M 减少到几十K，网页加载速度起飞。但是这种方案只能针对静态文字进行更换字体，例如网页的一些title，对于从后台返回的文字还是无能为力。