fontSpider字蛛，好用的字型壓縮工具教程

一直覺得很多字型特別好看，但是那些好看的字型只能做在上不能用css樣式去實現，作為乙個會設計的前端，真心覺得很煩惱，有時候那些文字需要更換，修改起來非常麻煩，要到處去找原始檔，找不到原始檔還要盡力去p出來。

於是在空閒時間，進入搜尋狀態，全網搜尋能將字型引入，並壓縮的軟體，不管國內國外都看了，最後發現了fontspider，中文名：字蛛。

開啟字蛛的官網：他上面也是有教程的，但是我表示，我真的是乙個很小白很小白的人，我看不懂啊。。。（和我一樣看不懂的請舉手…………）

後來請另乙個同事跟著一起研究，最後的最後發現，其實我真的好小白，人家說的挺清楚明白的，人家只是省了很多字罷了，那麼我今天就要在這裡囉嗦一下了，也是做個記錄，因為當我第二次使用時，我發現我忘記了第一次是怎麼做出來的。

第一步：

第二步：

在開始選單中找到node.js資料夾，然後點開有點像這個執行程式的圖示，我試過了，在電腦自帶的cmd執行程式上使用是無效的，必須使用他這個，所以他讓安裝還是有一定道理的。

第三步：

在這個開啟的node.js這個執行視窗中，將npm install font-spider -g

複製進去，然後enter鍵，等一會，他程式執行有點慢，很快他便會出現一大堆看不懂的東西。

第四步：

不要管一大堆的看不懂的。開啟你做好的html資料夾，字型記得建乙個font資料夾放進去，和images、css資料夾併排，字型名稱一定要換成字母的，你可以是中文縮寫什麼的。

第五步：

新建乙個css樣式表，定義字型，把下面的複製進去，輸入你剛剛在font裡命名的字型名稱，這樣字型的各種格式都定義好了。

@font-face {

font-family: '字型名稱';

src: url('../font/字型名稱.eot');

src:

url('../font/字型名稱.woff') format('woff'),

url('../font/字型名稱.ttf') format('truetype'),

url('../font/字型名稱.svg') format('svg');

font-weight: normal;

font-style: normal;

字型的格式都定義好了，肯定得引用了。

比如我在html中，有乙個h1標籤需要用到這個特殊字型，那麼就跟普通font-family一樣的做法了。

h1 {

font-family: '字型名稱';

font-size: 36px;

color: #666;

別急，到這一步還沒完，你去看看font資料夾，還是很大對吧。

第六步：

開啟剛剛執行了一半的node.js執行視窗，複製font-spider，然後打個空格，再複製你的路徑，比如我的路徑是d:/字蛛/test/index.html，因為我的html是放在d盤，然後乙個測試資料夾中，所以這樣寫，按下enter鍵

啦啦，成功了，他連裡面我是輸的什麼字需要用到特殊字型都顯示出來了。

於是，就醬紫成功了！是不是很簡單。。。。

然後回到font資料夾看，他會自動備份一下字型，那個特別大的資料夾就是了，再看看其它字型，只有幾個kb啊，太爽了有木有。。。