前言：
前段时间刚完成一个外项目，歇了几天，老大让我看看公司的官网，优化一下，发现移动端的字体下载特别慢，才发现引用了字体包，一个字体包就达到了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 —version |
五 坑
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里了，如需要可以去看看，有什么不对的地方，欢迎指正，大家一起进步加油。
上文内容不用于商业目的，如涉及知识产权问题，请权利人联系博为峰小编(021-64471599-8017)，我们将立即处理
