技术分享：font-spider（字蛛）的正确打开方式

前言

最近在部署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...后面在寻求多方帮助之后，自己沉下心来，终于解决了这个问题。

如果大家想学习前端方面的技术，我把我多年的经验分享给大家，还有一些学习资料，分享Q群：1046097531