菜鸟实习——字体加载缓慢使用字蛛（FontSpider）解决的办法以及超详细使用操作教程

今天写完网页加载的自定义字体文件，发现需要加载30s，非常影响网站访问，于是找到了字蛛（FontSpider）对字体进行压缩

---

1.FontSpider的原理：
通过对本地CSS 与HTML 文件的爬取，将用到的字符爬取出来并将没用到的这些字符数据从字体中删除以实现压缩

2.使用教程：

第一步：安装node.js

http://nodejs.cn/download/

安装后打开：
接着下载字蛛：

npm install font-spider -g

第二步：进入项目

进入你项目的文件夹例如我的在e:/wwwroot
输入命令 e: 进入E盘，输入 cd wwwroot 进入项目

第三步 开始压缩

首先在本地css中引用字体文件

/*声明 WebFont*/

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

保证自己的字体文件路径一定是和css中写的一样，只需要一个字体文件，其余字蛛会自动生成，并且会备份源文件

最后开始压缩
压缩有两种方式：

• 单个或多个文件压缩
• 一次压缩所有

单个文件压缩：

font-spider ./a.html

多个文件压缩（用空格链接）：

font-spider ./a.html ./pages/b.html

压缩所有文件：

font-spider ./*.html

以上命令可以随意组合使用中间用空格链接
如有二级文件夹：

font-spider ./*.html ./二级目录1/*.html ./二级目录2/*.html 

然后就成功了（备份文件在.font-spoder）：

此图出自网络，我操作搞忘截屏了￣□￣｜｜


最后就在css样式或全局中引用就OK：

font-family:'FZKT';