字蛛font-spider简单使用

因为有时候设计稿上有一些特殊的字体，但在写页面的时候，把整个字体都加载进入，就似乎有点浪费，而且加载有点慢（字体普遍都是上mb大小的）。

所有今天的主角就是font-spider，用来压缩字体文件。

• 字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。
• 记住是html出现过的字符才保留，js或者请求回来的都不会保留，因为分析html的时候压根还没有这些文字。

第一步 安装字蛛

打开CMD，然后输入如下：

• 全局安装字蛛

npm i font-spider -g

• 检查是否安装完成

font-spider -V

第二步 使用字蛛

在css文件中使用WebFont：

注意：

• 文件名和声明字体名必须英文，ttf文件必须存在，其余格式会自动生成。
• 开发阶段请使用相对路径的 CSS 与 WebFont

@font-face {
  font-family: 'pinghei';
  src: url('../font/pinghei.eot');
  src:
    url('../font/pinghei.eot?#font-spider') format('embedded-opentype'),
    url('../font/pinghei.woff') format('woff'),
    url('../font/pinghei.ttf') format('truetype'),
    url('../font/pinghei.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

/*在要使用的文字上*/
.test {
    font-family: 'pinghei';
}

第三步 生成压缩字体文件

注意：可以是相对路径也可以是绝对路径。

一类文件
font-spider ./*.html
或
单文件
font-spider ./index.html

然后在你引入的字体文件夹下就会生成4个压缩字体文件。

小技巧：

1. 因为font-spider会把使用了声明的font-family的字体和页面上的静态（即不是js来的和请求后加载进来的）字体进行保留压缩。
2. 因此如果你想要把请求的数据或者从js渲染到html上的字体，也会保留在字体文件中。可以在html里使用一个div把你需要的文字写上去，然后display: none; 这样字蛛也会把它保留在压缩文件中。

字蛛