字蛛（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的基本使用了