字蛛的使用及說明

web字體體積大致使加載過慢，對於前端來講是一大須要解決的問題，做爲一個前端小白，看不懂文檔也是個通病，不過仍是花了一些時間和朋友一塊兒研究了這個問題，並找到了解決方案就是「字蛛」。

字蛛網站：http://font-spider.org
GitHub源碼：https://github.com/aui/font-s...

字蛛簡介：

官方的說法 "字蛛是一款中文字體壓縮器"。字蛛經過分析本地 CSS 與 HTML 文件
獲取 WebFont 中沒有使用的字符，並將這些字符數據從字體中刪除以實現壓縮，同時生成跨瀏覽器使用的格式。

字蛛的API：

GitHub中字蛛有4個API。
1. dest 壓縮多個HTML文件的WebFont:
    font-spider dest/*.html
2.--info 顯示網站上使用的WebFont：
    font-spider --info http://fontawesome.io
3.--ignore 忽略文件：
    font-spider --ignore 「圖標\\ .css $ 」 dest / * .html
4.--map 此參數將映射WebFont的聯機頁面到本地，而後壓縮（本地路徑必須是絕對路徑）：
    font-spider --map 「 http://font-spider.org/font,/Website/font 」 http://font-spider.org/index.html

看網站和GitHub仍是比較清楚的，可是我看文檔比較費勁，花了很久才搞明白，下面就說一下使用流程和我碰到的一些須要注意的事項。

1. 首先按照官網說的 先安裝好NodeJS而後執行：

npm install font-spider -g

安裝成功後，能夠用'font-spider -V' 檢查一下是否安裝成功。

2. 在CSS中使用Webfont：

@font-face {
          font-family: '字體名稱';
          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;
        }
        //字體名稱是自定義的，按本身的要求決定名字就能夠了。

官網上的注意事項是兩條：

1. @font-face 中的 src 定義的 .ttf 文件必須存在，其他的格式將由工具自動生成。
2. 開發階段請使用相對路徑的 CSS 與 WebFont。

使用的時候 把上面這一部分代碼直接複製就能夠了。
特別須要注意的是：

1. 官網上的第一條注意事項，ttf格式是必須存在的，也就是ttf格式必定要按相對路徑找到文件才能夠。
其餘的必定都不要改動，只把字體名字改爲自定義的就能夠了。（我當時就改動了其餘的結果一直沒生效）
2. "../font/"改爲本身的路徑建議與ttf格式字體的路徑同樣，
執行完命令後會自動備份原始的ttf格式，壓縮好其餘格式將直接放在該路徑下。

3.運行font-spider命令：

在node.js command prompt中直接輸入須要壓縮的頁面 
font-spider ./demo/*.html

按照網頁的介紹來講，進行完這三步後，就會發現字體已經壓縮好了，在正式使用前能夠先利用demo嘗試一下。

---

按照開發來講,通常咱們會把 HTML 按不一樣的類別分別放進不一樣的文件夾，可咱們怎麼能同時爬取這些字呢，這時就能夠利用font-spider在GitHub中給出的API "dest".

GitHub中有一個例子："font-spider dest/news.html dest/index.html dest/about.html"

從這個例子中咱們能夠發現，咱們能夠直接壓縮幾個頁面或文件夾的字體，但若是每次在項目布上線前咱們都要寫一大長串不一樣的路徑和文件名字，這真是一件讓人頭疼的事情。

爲了解決這個問題,咱們編寫了一段bash腳本方便你們使用，只要在每次項目上線前寫出HTML所在文件夾的路徑，這段腳本就會自動遍歷出這個文件夾中全部的HTML文件，壓縮並執行font-spider命令，從而直接對字體進行生成。固然同時若是文件夾內還存在其餘類型的文件，本腳本也能夠作到忽略其餘文件，只遍歷HTML文件。

使用腳本的方法和其餘須要注意的幾項：

1.使用前須要安裝bash，我使用的是Git Bash。
2.打開腳本後會出現一句話 "please input build path:" ,而後寫上你須要壓縮並執行字蛛的文件夾路徑，
點擊回車命令就會執行，執行成功後窗口將自動關閉。

如圖：

3.使用字蛛 nodeJs 版本不建議太高，我使用8.x的版本沒有成功，後來改爲6.x的版本成功了。
看了其餘人的文檔發現可能也跟npm有關，若是npm版本太高也是執行不成功。
4.其餘文檔中也說字蛛使用有坑點，但本人使用中並未碰到，因此在這裏就再也不贅述了。

最後附上腳本的下載連接(上次的腳本有些問題，如今已經更改並測試沒有問題)：http://pan.baidu.com/s/1kVf1b4z