使用字蛛教程以及遇到的bug

前言：

前段时间刚完成一个外项目，歇了几天，老大让我看看公司的官网，优化一下，发现移动端的字体下载特别慢，才发现引用了字体包，一个字体包就达到了11M，想着既然有了图片压缩，那么应该有字体压缩，所以百度，弄了起来，废了不少劲，遇到不少坑，记录下来。

WebFont可以让网页使用特殊字体，就不用针对特殊字体用图片来代替了，通过 CSS3的新属性@font-face 语句引入字体资源，然后使用 CSS 选择器指定 font-family运用字体的文本。

一 了解字蛛

字蛛 正如官网所说：是一个中文字体压缩器，（http://font-spider.org/）
它的原理就是将页面引用特殊字体的字体抽出来，然后访问字体包对应的字体，进而合成一个字体包，这样就不用引入3000多个字体了，实现了按需引入的功能。

官方话：字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。

虽然官网有详细的教程，自己还是再记录下，哈哈哈。

二 安装

font-spider是一个node包，依赖于node，所以应先下载node，下载过程略～（前端再不懂node，真不好意思说是前端了）
之后：

npm install font-spider -g

查看版本号

font-spider —version

如果出现版本号，则代表安装成功。

三 使用

在 CSS 中使用 WebFont：

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

四 运行

在当前路径下，或者要压缩字体的html文件下，实行终端：

font-spider xxx.html

五 坑

• 1 font-spider主要依据ttf格式的文件来进行分析压缩的，所以font-face的路径必须存在ttf格式的，其他格式不行。设计师的字体大部分都是网上下载的，可以找设计师要字体包的名字，然后通过这个网站字客网去找对应的ttf，下载～

• 2 引入路径要使用相对路径，
  否则会报 Web Font was not found

• 3 font-spider 仅适用于固定文本，如果文字内容为动态可变的，新增的文字将无法显示为特殊字体。解决办法是删除压缩后的，将备份出来的还原，重新压缩。

  font-spider xxx.html 如果不添加options，会默认备份原文件。
  font-spider会将页面依赖的字体将会自动压缩好，原 .ttf 字体会备份；

  如需再次压缩，还原.ttf字体文件，修改html文字之后，再次运行font-spider即可。

• 4 如下：
  

  这个报错就是Quarto A没有对应字体包，我查过这个字体是类似于base64那样形式的字体，所以不存在引入文件。
  所以如果不想压缩某个字体包的话，就先注释其font-face。

• 5 一旦压缩一次后，再压缩别的是没用的。

  比如说，我在一个文件夹里压缩了字体，然后生成了新的字体包，我又在另一个文件夹里压缩字体，这两个文件夹的字体共用一个字体包和font-face，所以再次压缩的就是上一个压缩字体包进行压缩的，所以导致页面中有的字体没有转化过来。

  解决办法：一个命令行压缩所有

   font-spider file1/*.html file2/*.html file3/*.html
  

  这样即可，*.html代表通配符，分析所有html格式的文件，多个文件就直接在后面加上。

  我最大的坑就是这个，没仔细看官方文档，认为只能一次性，浪费了好多时间，wtf。

总结

字蛛是一个很好用的字体压缩包，将十几M的字体包变成了多少k的字体包，减少了容量，提高了性能，优化了用户体验，推荐！

我把笔记放到GitHub里了，如需要可以去看看，有什么不对的地方，欢迎指正，大家一起进步加油。