关于前端:前端开发使用第三方字体文件并使用-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. 在须要的中央进行应用

<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，对于从后盾返回的文字还是无能为力。