前言：
前段時間剛完成一個外項目，歇了幾天，老大讓我看看公司的官網，優化一下，發現移動端的字體下載特別慢，才發現引用了字體包，一個字體包就達到了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 xxx.html
五 坑
-
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里了，如需要可以去看看，有什么不對的地方，歡迎指正，大家一起進步加油。