前言
最近在部署vue项目之后，在打开网页的时候，ttf文件下载时间实在是太久了，在经过合理的运用搜索引擎之后，可能自己的固化思维消化不了大佬们给出的方案，于是在他们的基础之上做了一些小小的改动，便叙文记之。
1. 引入font-spider的依赖
首先我们执行npm install font-spider -g引入依赖， 执行完成后，可以输入font-spider -V来检查是否引入成功
2. 在根目录下创建三个文件
2.1 fonts
这里放入原字体包，Lato-Medium.ttf、Lato-Bold.ttf 这里可以更换为自己想要用到的ttf字体包
2.2 index.css
在这里设置@font-face和对应的class元素,为了方便比较，我们引入两个字体来看对比
@font-face {
font-family: 'Lato-Medium';
src: url('./fonts/Lato-Medium.eot');
src:
url('./fonts/Lato-Medium.eot?#font-spider') format('embedded-opentype'),
url('./fonts/Lato-Medium.woff') format('woff'),
url('./fonts/Lato-Medium.ttf') format('truetype'),
url('./fonts/Lato-Medium.svg') format('svg');
font-weight: normal;
font-style: normal;
}
.medium {
font-family:'Lato-Medium';
}
@font-face {
font-family: 'Lato-Bold';
src: url('./fonts/Lato-Bold.eot');
src:
url('./fonts/Lato-Bold.eot?#font-spider') format('embedded-opentype'),
url('./fonts/Lato-Bold.woff') format('woff'),
url('./fonts/Lato-Bold.ttf') format('truetype'),
url('./fonts/Lato-Bold.svg') format('svg');
font-weight: normal;
font-style: normal;
}
.bold {
font-family:'Lato-Bold';
}
复制代码
这里，我们的css工作就做完了，接下来就操作html文件吧
2.3 index.html
这里首先在<head>处要引入index.css文件<link rel="stylesheet" href="index.css">，然后在<body>处压缩我们想要的字体吧，这里只能压缩静态字体哦
<!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.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>font spider</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div>
<!-- 这里对应的是Bold的压缩包 -->
<div class="bold">
abcdefghijklmnopqrstuvwxyz
</div>
<!-- 这里对应的是Medium的压缩包 -->
<div class="medium">
ABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>
<!-- 这写在class元素之外的就没有对应的压缩包了 -->
0123456789
</div>
</body>
</html>
复制代码
这里html里面的写法只会把小写的a～z压缩成Lato-Bold字体，也就是是说Lato-Bold这个ttf文件在被压缩之后，内部只包含了a～z的字体，Lato-Medium同理。
3.生成新的ttf包
做完上面的这些操作之后，就可以执行font-spider index.html生成新的压缩ttf文件了，这个时候，不仅会生成ttf文件，还会生成eot、woff、svg这些文件，我们取我们要用到的ttf文件即可
4.应用到自己的项目中
将生成的ttf文件放到自己的项目文件目录夹下，然后在css文件引入的时候，需要这么写src: url("../fonts/Lato-Bold.ttf") format('truetype');
@font-face {
font-family: 'Lato-Bold';
src: url("../fonts/Lato-Bold.ttf") format('truetype');
font-weight: normal;
font-style: normal;
}
复制代码
写在最后
在初次接触这个问题的时候，我看到的都是用.html的方式来使用font-spider方法的，当时我固化思维的就一个劲的查询Vue怎么使用font-spider，搜索结果不尽人意，当时有一种挫败感，什么辣鸡玩意儿，都不支持vue...后面在寻求多方帮助之后，自己沉下心来，终于解决了这个问题。
