相信很多做前端的都會(huì)遇到這一類問(wèn)題，當(dāng)前網(wǎng)頁(yè)需要引入一些特殊字體，過(guò)去這些字體通常使用圖片代替，不僅增加了request請(qǐng)求，交互起來(lái)也不方便。

CSS3 @font-face(自定義字體)

相信很多人已經(jīng)了解這個(gè)新特性了，在CSS3之前web設(shè)計(jì)師必須使用用戶計(jì)算機(jī)上已經(jīng)安裝好的字體，如果需要特殊字體，必須以圖片的形式放置在網(wǎng)頁(yè)上。而現(xiàn)在我們可以通過(guò)CSS3的@font-face規(guī)則來(lái)定義我們想要的字體。
@font-face可以實(shí)現(xiàn)從服務(wù)器端加載字體，所有瀏覽器中使用的字體就可以不受本地字體的限制。對(duì)于@font-face可參照 w3school的@font-face。
就像任何一項(xiàng)技術(shù)的產(chǎn)生都會(huì)帶來(lái)相應(yīng)的利與弊一樣，要使用“自己的”字體的話，需要使用@font-face屬性。這就產(chǎn)生了個(gè)讓人頭疼的問(wèn)題，中文不像英文，只有26個(gè)字母和一些簡(jiǎn)單的符號(hào)。中文有上萬(wàn)個(gè)字，每一個(gè)字都需要載入的話，一打開(kāi)網(wǎng)頁(yè)為了加載幾個(gè)字就會(huì)話無(wú)緣無(wú)故花掉很多（很多）流量。

字蛛的使用方法

就像某參老師跟我們說(shuō)的一樣，要想精通一件事情，就要先理解它的機(jī)制和原理。
字蛛的工作原理：通過(guò)對(duì)本地 CSS 與 HTML 文件的爬取，將用到的字符爬取出來(lái)并將沒(méi)用到的這些字符數(shù)據(jù)從字體中刪除以實(shí)現(xiàn)壓縮，再生成跨瀏覽器使用的格式。
下面放上字蛛的鏈接 字蛛官網(wǎng)

字蛛

• 安裝NodeJS

像官網(wǎng)說(shuō)的那樣安裝好NodeJS；附NodeJS下載鏈接

• 安裝字蛛

打開(kāi)Node.js command prompt如下圖所示，并輸入命令：npm install font-spider -g 回車執(zhí)行

NodeJS管理工具

• 在 CSS 中聲明WebFont

切換到你寫(xiě)的css頁(yè)面聲明字體，方法與CSS3的@font-face方法類似

          @font-face {
          font-family: 'pinghei';
          src: url('../font/pinghei.eot');
          src:
          url('../font/pinghei.eot?#font-spider')
          format('embedded-opentype'),
          url('../font/pinghei.woff') format('woff'),
          url('../font/pinghei.ttf') format('truetype'),
          url('../font/pinghei.svg') format('svg');
          font-weight: normal;
          font-style: normal;
          }
        /*使用選擇器指定字體*/
        .home h1, .demo > .test {
        font-family: 'pinghei';
        }

注意：
1.<small>@font-face中的src定義的 .ttf 文件必須存在，其余的格式將由工具自動(dòng)生成</small>
2.<small> 開(kāi)發(fā)階段請(qǐng)使用相對(duì)路徑的 CSS 與 WebFont</small>

• 爬取所需的字

運(yùn)行 font-spider 命令：font-spider ./路徑/文件名.html
頁(yè)面所需的字體將會(huì)自動(dòng)壓縮好，原 .ttf 字體會(huì)備份，就是那個(gè)很大的文件夾。爬取壓縮結(jié)束后原來(lái)8M左右的中文字體包現(xiàn)在只要6KB，還能將你頁(yè)面所用到的字顯示出來(lái)。

爬取壓縮

備份的字體文件

字蛛坑點(diǎn)：

這里建議對(duì)需要替換大段文字的文本少使用字蛛，因?yàn)槭褂煤筮@樣你會(huì)發(fā)現(xiàn)在有標(biāo)點(diǎn)和空格的地方會(huì)出現(xiàn)“!”。
解決方案：
1.可以利用標(biāo)簽嵌套標(biāo)點(diǎn)的方法進(jìn)行微調(diào)。
2.有網(wǎng)友說(shuō) 寫(xiě)成 font-family:Arial +自己的字體，感嘆號(hào)就會(huì)消失 （本人未親自測(cè)試）。

其他webFont在線制作網(wǎng)站

阿里webFont不僅能在線獲取webFont還有海量圖標(biāo)網(wǎng)站制作的時(shí)候用起來(lái)很方便。
fontmin懶得寫(xiě)代碼，fontmin客戶端幫你解決問(wèn)題，點(diǎn)擊生成 duang~的一下生成新的字體包