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

使用第三方字体文件 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. 在需要的地方进行使用

@import url('~assets/css/font.less'); .title { font-family: AlibabaPuHuiTiB; }

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