什么是 iconfont
iconfont就是字面上的意思，叫做“字體圖標(biāo)”州丹，將一套圖標(biāo)集以字體文件的形式封裝，并通過 CSS 的 @font-face 作為 Web Font 調(diào)用杂彭。
為什么要使用 iconfont
在互聯(lián)網(wǎng)剛起步的時(shí)候墓毒，較多使用的是png圖片，但是png圖片更換起來很麻煩亲怠， 并且自適應(yīng)效果很差所计，有時(shí)候會(huì)出現(xiàn)鋸齒以及馬賽克模糊的情況，加載起來也較慢团秽，影響用戶體驗(yàn)主胧。
iconfont 的產(chǎn)生就是來解決上面的問題，將 icon 做為字體來使用习勤，它具有很多優(yōu)勢(shì)：
對(duì) web 和 app：
彈性踪栋，在網(wǎng)頁或者 app 上，展示字體是很便捷的图毕。用 iconfont 可以很方便的改變 icon 的顏色夷都，或者加入一些其他的效果。
可縮放予颤，可以很方便的改變圖標(biāo)的大小囤官。
矢量厢破，iconfont 是矢量的并且具有獨(dú)立的分辨率，不管在高分辨率還是低分辨率治拿，不管是在網(wǎng)頁還是手機(jī)端摩泪，都具有很好的展示效果，不會(huì)出現(xiàn)鋸齒或者馬賽克模糊劫谅。
節(jié)省加載時(shí)間见坑，iconfont 很小，每個(gè)小圖標(biāo)只有幾 kb捏检，大大節(jié)省了加載時(shí)間荞驴。
對(duì)設(shè)計(jì)師來說：
- 可以本地使用，這個(gè)是我最喜歡的功能贯城，將 iconfont 安裝到本地的系統(tǒng)上熊楼，然后就可以在Ps，Ai能犯，Sketch這些設(shè)計(jì)軟件里使用啦~
推薦的兩個(gè) iconfont 工具
那么對(duì)于設(shè)計(jì)師來說鲫骗，要做 iconfont 需要怎么操作呢策治？
首先搁廓，需要一個(gè)轉(zhuǎn)換設(shè)計(jì)稿的平臺(tái)夫凸。
目前储笑，國內(nèi)用的最多的是阿里巴巴矢量庫，優(yōu)點(diǎn)是這是國內(nèi)的中文網(wǎng)站满俗，使用起來無語言障礙弄痹，缺點(diǎn)就是版權(quán)問題罩引，因?yàn)樯蟼魃蟻淼膱D標(biāo)全部是做為公開庫的茸苇，其他人可以進(jìn)行瀏覽下載排苍。以下是阿里巴巴矢量庫的官方免責(zé)聲明。
在此学密，推薦一個(gè)國外的網(wǎng)站淘衙，iconmoon 創(chuàng)建于2011年，其上有很多成熟的圖標(biāo)集则果，大多數(shù)都是精心制作幔翰，要收費(fèi)的漩氨，可以看看拿來參考西壮。主要還是要用它提供的制作 iconfont 的功能。
如何使用 iconmoon
第一步
將設(shè)計(jì)的 icon 導(dǎo)出成 svg 文件叫惊。我做了一個(gè) icon 參考線的sketch文件款青，其中有64x64，32x32霍狰，24x24三個(gè)尺寸抡草，以此來保證一套圖標(biāo)中 icon 大小的一致性饰及。文末提供下載。
第二步
打開iconmoon網(wǎng)站康震，點(diǎn)擊 import icons 按鈕燎含，選擇剛剛導(dǎo)出的 svg 格式的 icon，要注意的是腿短，圖標(biāo)不能直接使用描邊屏箍，要用布爾運(yùn)算做成填充樣式的，要不上傳的圖標(biāo)在縮放的時(shí)候會(huì)遇到問題橘忱。
第三步
點(diǎn)擊右下角的 generate font赴魁，再點(diǎn)擊 download
第四步
會(huì)得到一個(gè)zip的壓縮包
解壓出來，可以看到有demo钝诚，有字體文件颖御，也有使用代碼
把這個(gè)文件夾直接給開發(fā)就ok啦~
如何在本地使用 iconfont
那么凝颇，如何在本地使用 iconfont 呢潘拱？
第一步
像安裝正常字體文件一樣安裝剛剛解壓的文件夾里的 .ttf 文件
第二步
打開 demo.html 文件復(fù)制里面的圖標(biāo)代號(hào)到 sketch 里面拧略，復(fù)制如下圖綠色部分。
第三步
選擇字體辑鲤，可以看到圖標(biāo)就出現(xiàn)了盔腔，可以像處理文字一樣的處理圖標(biāo)，改變它的大小和顏色弛随。
