摘要：歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面不僅僅是代碼從說(shuō)起要想了解，得從一個(gè)新的規(guī)則說(shuō)起。因?yàn)橛脩魶](méi)有安裝的話，我們強(qiáng)制要求顯示也沒(méi)有辦法。國(guó)內(nèi)有阿里巴巴的平臺(tái)，可以選自己喜歡的圖標(biāo)導(dǎo)出。

歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：
https://segmentfault.com/blog/frontenddriver

要想了解iconfont，得從一個(gè)新的css3規(guī)則說(shuō)起。css3中，新增了一種樣式規(guī)則，@font-face，這個(gè)規(guī)則可以用來(lái)引入自定義的字體，到客戶端。以前，我們的字體只能聽(tīng)任客戶端的。因?yàn)橛脩魶](méi)有安裝的話，我們強(qiáng)制要求顯示也沒(méi)有辦法。
現(xiàn)在使用@font-face則可以引入在web服務(wù)器上存放的字體文件，從而達(dá)到，可以使用一些客戶端瀏覽器上不存在的字體，等到瀏覽器去訪問(wèn)并渲染時(shí)，去下載font-face指定的字體。并命名為我們想要的字體。如圖1.1：

    
        
        
    
    
        

            測(cè)試1
        
        

            測(cè)試2
        
    

圖1.1

上面的自已個(gè)h1中使用的，正是我們存在服務(wù)端的字體。由于各個(gè)瀏覽器的兼容性問(wèn)題，

1.IE瀏覽器：EOT
2.Mozilla瀏覽器：OTF，TTF
3.Safari瀏覽器：OTF，TTF??，SVG
4.歌劇：OTF，TTF??，SVG
5.Chrome瀏覽器：TTF，SVG

所以，我們需要準(zhǔn)備多個(gè)格式的不同的字體文件。指代同一份字體。

@font-face {
    font-family: "icons";
    src: url(../font/curiconfont.eot#iefix) format("embedded-opentype"),
         url(../font/curiconfont.woff) format("woff"),
         url(../font/curiconfont.ttf) format("truetype"),
         url(../font/curiconfont.svg?#iconfont) format("svg");
    font-weight: normal;
    font-style: normal;
}

后面的format指代的是墻面的資源是那種格式的。如想更詳細(xì)了解，可以百度一下font-face。上面提到的例子可以在github上的hellofontface.html中找到。

既然font-face可以指定字體文件，那么字體長(zhǎng)成什么樣，不就是開(kāi)發(fā)者說(shuō)的算了么。我們可以描述一個(gè)字體，它長(zhǎng)成這樣：。其實(shí)，話說(shuō)回來(lái)，文字不就是圖像么。人類(lèi)最早發(fā)明文字的時(shí)候就是按照?qǐng)D像來(lái)發(fā)明的。所以，我們可以把一些字符，描述成圖像。在我們的網(wǎng)頁(yè)上，當(dāng)成圖像來(lái)使用。這就是iconfont了。把一些零散的icon做成字體。我們調(diào)用文字的時(shí)候，渲染出來(lái)的就是icon圖像了。

我們來(lái)拿手機(jī)百度首頁(yè)的字體做個(gè)小例子試試(如圖3.1)，我們新加入一個(gè)font-face，起名為myFont，在需要使用這份iconfont的部分，font-family設(shè)置為myFont，則這部分區(qū)域可以使用上該font文件:

    
        
        
    
    
        

            
        
        

            
        
    

圖3.1
我們看到我們?cè)诰W(wǎng)頁(yè)上寫(xiě)了一個(gè)字符，本來(lái)這個(gè)字符對(duì)應(yīng)的文字應(yīng)該是什么都沒(méi)有：
但是，我們的iconfont中賦予了這個(gè)字符的圖像：，于是，我們將這個(gè)字符所在的區(qū)域的字體，設(shè)置為我們的iconfont文件。于是瀏覽器就渲染出了這個(gè)字符在我們的font文件中，對(duì)應(yīng)的圖像。這里要注意一下---- ，是一個(gè)字符的html編碼。這個(gè)字符在瀏覽器中沒(méi)有定義，但是在iconfont中有定義。我們可以使用unicode碼來(lái)唯一標(biāo)識(shí)一個(gè)字符，將這個(gè)字符在我們的文件中畫(huà)出來(lái)。這樣就可以利用上iconfont了。

既然知道了怎么用，就要開(kāi)始了解一下，如何制作一個(gè)iconfont了。國(guó)內(nèi)有阿里巴巴的iconfont平臺(tái)，可以選自己喜歡的圖標(biāo)導(dǎo)出iconfont。

http://www.iconfont.cn/

如果我們手里有一些圖標(biāo)，想轉(zhuǎn)換為iconfont的話，可以直接使在線工具轉(zhuǎn)換：

http://image.online-convert.com/convert-to-svg

設(shè)計(jì)師們也可以使用illustrator直接將圖片導(dǎo)出為svg，具體導(dǎo)出方式可以參考如下鏈接：

http://www.w3cplus.com/svg/svg-files-from-illustrator-to-the-web.html

導(dǎo)出單個(gè)icon的svg后，可以上傳至阿里巴巴的iconfont平臺(tái)，與其他圖標(biāo)拼合成一張字體文件。(后續(xù)會(huì)更新一個(gè)我們自產(chǎn)的iconfont生成框架)

看到這里，一些同學(xué)肯定會(huì)問(wèn)，那我們?yōu)槭裁匆胕confont呢？直接用圖片不就好了。

這里我們分析一下使用iconfont的利與弊

相信讀者們沒(méi)有見(jiàn)過(guò)文字在網(wǎng)頁(yè)上放大的時(shí)候會(huì)失真的狀況吧，因?yàn)樽煮w是矢量的，字體的描繪只記錄繪制的路徑。而圖片不是，我們?nèi)绻岩粡埿D放大若干倍之后，會(huì)發(fā)現(xiàn)圖像變得模糊了。因?yàn)閳D像是基于像素點(diǎn)的描述，放大后，之前圖像的一個(gè)像素，被放大為多個(gè)像素。自然是會(huì)失真的

在圖片清晰度要求越高的情況下，我們的圖片本身就會(huì)越大。這樣非常耗費(fèi)資源，而且，圖像需要的色彩值信息，也會(huì)存儲(chǔ)。這樣也極大的浪費(fèi)了空間。iconfont顏色由css決定，尺寸要求變大的話，則適應(yīng)性的變大。傳輸?shù)拇笮〔粫?huì)變大。

試想，如果一個(gè)圖標(biāo)一開(kāi)始是黑色的hover上去的時(shí)候變?yōu)樗{(lán)色的話，如果這個(gè)icon是用圖片來(lái)實(shí)現(xiàn)的話，我們需要在hover的時(shí)候，更換背景圖片，如果使用iconfont的話，則可以直接替換icon的color就行。

作為文字，是不會(huì)出現(xiàn)左邊是紅色右邊是綠色的狀況的。一個(gè)文字，是一個(gè)整體，統(tǒng)一的顏色。這個(gè)顏色就取決于css的color了。所以使用iconfont做圖標(biāo)的話，最好使用純色的圖標(biāo)。

如果單論直接使用的話，圖片還是比較便捷的。

至于自己的網(wǎng)站要不要使用iconfont就看各位了。

本章的例子在github上，需要的同學(xué)請(qǐng)自行查看：

https://github.com/houyu01/iconfontsample

接下來(lái)的一篇文章，我將會(huì)和讀者們一起聊聊前端模板拼裝與渲染的那些事兒，不要走開(kāi)，請(qǐng)關(guān)注我.....
前端模板拼裝與渲染的那些事兒
原創(chuàng)文章,版權(quán)所有,轉(zhuǎn)載請(qǐng)注明出處