文章摘要：
1>> font-spider 字體神奇
由於活動項目推廣的需要，頁面需要用到一些漂亮好看的字體，example : 邯鄲-韓鵬毛遂體.ttf、 方正喵嗚.ttf
我看了一些好看的測試活動頁面的demo，頁面的（問題和答案）都是直接切成的小圖片，我看了也是楞了，難怪這么好看。於是本想着也這么做，結果發現了一個很嚴重的問題。
我計算了一下，我們的問題大概有60道，而每道題的答案有3、4、5個，算了一個下，如果是切成小圖片來維護的話，至少也得有： 60*4=240 張圖片吧。於是設計和后端開發都不干了，這是一個噩夢啊。
此處省略千言萬語................，等等。問題還是得解決的,於是經過協商還是准備采用字體庫來做，於是走上了高大上的道路
對於第一次接觸我來說，發現了很多英文的字體倒是挺多，中文的字體很少，到網上找了大半天，都沒有找到一個好的字庫。無意中找到了一個叫做Font-Spider的中文蜘蛛，於是好奇的用了下，發現了它真是神奇。
font-spirder 官網：http://font-spider.org/
font-spirder：讓網頁自由引入中文字體成為可能
步驟分為3步，超級簡單：
步驟一: npm 安裝 font spider
1 npm install font-spider -g
步驟二: 在 CSS 中使用 WebFont
1 /*聲明 WebFont*/ 2 @font-face { 3 font-family: 'pinghei'; 4 src: url('../font/pinghei.eot'); 5 src: 6 url('../font/pinghei.eot?#font-spider') format('embedded-opentype'), 7 url('../font/pinghei.woff') format('woff'), 8 url('../font/pinghei.ttf') format('truetype'), 9 url('../font/pinghei.svg') format('svg'); 10 font-weight: normal; 11 font-style: normal; 12 } 13 14 /*使用選擇器指定字體*/ 15 .home h1, .demo > .test { 16 font-family: 'pinghei'; 17 }
注意：
1>>. @font-face 中的 src 定義的 .ttf 文件必須存在，其余的格式將由工具自動生成
2>>. 開發階段請使用相對路徑的 CSS 與 WebFont
步驟三： 運行 font-spider 命令
1 font-spider ./*.html
【提醒】：我的思路就是先統計項目中總共用到了那些字,歸類的生成的不同的字庫，目前font-spider還不支持動態的生成：
效果如下：
font-spider 生成的：方正喵嗚.ttf
font-spider 生成的：邯鄲-韓鵬毛遂體.ttf
