相信很多做前端的都會遇到這一類問題横腿，當(dāng)前網(wǎng)頁需要引入一些特殊字體棺克，過去這些字體通常使用圖片代替症概，不僅增加了request請求育勺，交互起來也不方便。
CSS3 @font-face(自定義字體)
相信很多人已經(jīng)了解這個新特性了罗岖，在CSS3之前web設(shè)計師必須使用用戶計算機(jī)上已經(jīng)安裝好的字體涧至，如果需要特殊字體，必須以圖片的形式放置在網(wǎng)頁上桑包。而現(xiàn)在我們可以通過CSS3的@font-face規(guī)則來定義我們想要的字體南蓬。
@font-face可以實(shí)現(xiàn)從服務(wù)器端加載字體，所有瀏覽器中使用的字體就可以不受本地字體的限制哑了。對于@font-face可參照 w3school的@font-face赘方。
就像任何一項(xiàng)技術(shù)的產(chǎn)生都會帶來相應(yīng)的利與弊一樣，要使用“自己的”字體的話弱左，需要使用@font-face屬性窄陡。這就產(chǎn)生了個讓人頭疼的問題，中文不像英文拆火，只有26個字母和一些簡單的符號跳夭。中文有上萬個字涂圆，每一個字都需要載入的話，一打開網(wǎng)頁為了加載幾個字就會話無緣無故花掉很多（很多）流量币叹。
字蛛的使用方法
就像某參老師跟我們說的一樣润歉，要想精通一件事情，就要先理解它的機(jī)制和原理颈抚。
字蛛的工作原理：通過對本地 CSS 與 HTML 文件的爬取踩衩，將用到的字符爬取出來并將沒用到的這些字符數(shù)據(jù)從字體中刪除以實(shí)現(xiàn)壓縮，再生成跨瀏覽器使用的格式贩汉。
下面放上字蛛的鏈接 字蛛官網(wǎng)
粗略看了下字蛛官網(wǎng)的的使用說明驱富，感覺說的很詳細(xì)了。不過對于一些小白來說可能還有很多看不懂的地方雾鬼。這里詳細(xì)的介紹下：
-
安裝NodeJS
像官網(wǎng)說的那樣安裝好NodeJS萌朱；附NodeJS下載鏈接
-
安裝字蛛
打開Node.js command prompt如下圖所示，并輸入命令：npm install font-spider -g 回車執(zhí)行
-
在 CSS 中聲明WebFont
切換到你寫的css頁面聲明字體策菜，方法與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 文件必須存在晶疼，其余的格式將由工具自動生成</small>
2.<small> 開發(fā)階段請使用相對路徑的 CSS 與 WebFont</small>
-
爬取所需的字
運(yùn)行 font-spider 命令：font-spider ./路徑/文件名.html
頁面所需的字體將會自動壓縮好，原 .ttf 字體會備份又憨，就是那個很大的文件夾翠霍。爬取壓縮結(jié)束后原來8M左右的中文字體包現(xiàn)在只要6KB，還能將你頁面所用到的字顯示出來蠢莺。
字蛛坑點(diǎn)：
這里建議對需要替換大段文字的文本少使用字蛛寒匙，因?yàn)槭褂煤筮@樣你會發(fā)現(xiàn)在有標(biāo)點(diǎn)和空格的地方會出現(xiàn)“!”。
解決方案：
1.可以利用標(biāo)簽嵌套標(biāo)點(diǎn)的方法進(jìn)行微調(diào)躏将。
2.有網(wǎng)友說 寫成 font-family:Arial +自己的字體锄弱，感嘆號就會消失 （本人未親自測試）。
其他webFont在線制作網(wǎng)站
阿里webFont不僅能在線獲取webFont還有海量圖標(biāo)網(wǎng)站制作的時候用起來很方便祸憋。
fontmin懶得寫代碼会宪，fontmin客戶端幫你解決問題，點(diǎn)擊生成 duang~的一下生成新的字體包
