字蛛（font-spider）， 一个智能 WebFont 压缩工具！

lz在最近的一个项目中需要用到自定义的字体，如下图这样：

由于有很多个这样类似的模块，所以切图的话只会影响页面加载速度，而且工作量太大，所以只能自定义字体，但是字体的太大需要3.6M，这时候就需要将字体压缩了，在以前用到的工具是Fontmin(http://efe.baidu.com/blog/fontmin-getting-started/),以前用的是客户端的方法直接进行压缩，但是这次却遇到的报错，原因未知（当然这个人软件大部分情况下还是挺好用的），如下图所示：

在寻找解决办法无果后，只能另寻他法，最后就发现的font-spider;

    　　官网：http://font-spider.org/;

　　　 源码：https://github.com/aui/font-spider/blob/master/README-ZH-CN.md;

 

GitHub上面的介绍：字蛛是一个智能 WebFont 压缩工具，它能自动分析出页面使用的 WebFont 并进行按需压缩。

先说一下font-spider的具体使用方法：

1、安装

　　由于安装font-spider需要依赖于npm(node package manager),即node包管理器，所以得事先安装后node(官网： https://npmjs.org/),然后我们执行

npm install font-spider -g

安装完成后查看font-spider版本号，如果正确显示就说明安装完成了;

2、书写css

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

/*使用指定字体*/
.home h1, .demo > .test {
    font-family: 'source';
}

*注意：@font-face 中的 src 定义的 .ttf 文件必须存在，其余的格式将由工具自动生成

3、进行压缩

先定位到项目所在地址：cd  + 项目地址；

执行font-spider:

font-spider  *.html

成功之后在你的项目文件中就会重新生成压缩后的文件了。

 

当然在使用font-spider中也遇到了问题，如下：

　　在终端执行font-spider报错：Error: Expecting a function in instanceof check, but got undefined

　　这时候我们需要修改node_modules\font-spider\src\spider\index.js 文件，注销掉以下代码

　　

　

　　以上就是font-spider的基本使用了

 

转载于:https://www.cnblogs.com/xudajuanzi/p/6377828.html