在移動端H5制作中，有需要用到特別得中文字體包的情況，但是中文字體包，真的很大很大...大到十幾兆...比如下圖中的字體包：
對於一個簡單的H5來說，項目本身都沒有1MB，這么大的字體包顯然是一個很大的累贅...那么，如何解決字體包體積如此之大的問題呢？
剛開始，我還希望能找到類似於圖片、視頻這類的在線壓縮軟件一樣，能有在線壓縮字體的網站直接進行壓縮，然后發現，我可能腦闊有點問題...
后來，get到了減小字體包體積的思路：將網站中沒有用到的字符數據從字體中刪除，以此來實現壓縮，這樣，就要用到字蛛:
如何使用呢？
在font-spider官方文檔中其實講解的很明白了，下面我們來講解一個簡單的示例
然后我們在瀏覽器中查看效果：
接下來，我們開始正式操作：
1、全局安裝font-spider
npm install font-spider -g
2、在css中使用font
如圖中css所示。
兩個注意點：(1) @font-face中src定義的.ttf文件必須存在，其余的格式將由工具自動生成。
（2）開發階段請使用相對路徑的css與webFont
3、打開命令行，執行font-spider命令
如果壓縮成功的話，緊接着會出現以下內容：
然后，我們查看文件目錄會發現，工具將我們的目錄結構也做了相應的改變：
打開瀏覽器看看效果：
顯然，字體生效了~
為了再驗證一下其它沒出現的字體是不是真的被剔除了，我們新加一段文字：
然后我們刷新瀏覽器：
我們可以很清晰的看見，新出現的‘哈、下、看’這三個字顯示的是默認字體，而出現過了的‘測、試、一’就顯示正常。
所以，這足以驗證我們的字體壓縮很成功。
最后，我們再重新執行下命令進行壓縮：font-spider ./index.html
現在就好了：
【如何在vue/webpack中使用fontSpider】
在vue/webpack項目中，頁面中很多文字內容都是動態渲染進去的，而且，css、js文件都是動態編譯生成的，這種情況下，我們要如何使用fontSpider呢？
首先，我們可以新建一個index.html文件，類似上述示例的文件結構，在項目比較大，文字內容比較多的時候，我們可以將所有的文字內容都放入到body中，然后在css文件中對body進行字體設置：
然后執行font-spider命令：
可以發現，頁面中所有的文字都包含在每一個字體包中，這樣的好處是，不會有遺漏的，壞處是會有‘浪費’的字符。
當然，如果文字內容比較少，而你又比較耐心的話，可以將文字精准的歸類至它相應的標簽中，然后對特定css選擇器設置font-family。比如說，整個頁面要用到兩個字體，那么你可在頁面中設置div和p兩個標簽，將用到第一個字體的文字都放在div標簽中，將用到第二個字體的文字都放在p標簽中，然后在css中將要div選擇器的font-family設置為第一個字體，p選擇器的font-family設置為第二個字體。