我們?yōu)g覽網(wǎng)頁時(shí)可能會(huì)發(fā)現(xiàn)上面有很多簡單的線性圖標(biāo)。

比如下圖天貓商品分類左側(cè)的小圖標(biāo)

微博下方評論小圖標(biāo)

嗯，就是這樣一組看似很簡潔卻不簡單的小圖標(biāo)

這樣的小圖標(biāo)繪制起來不難，難就在于放在網(wǎng)頁當(dāng)中如何能保證清晰的顯示，它的尺寸會(huì)非常的小，以至于低到是30px的正方形，在這樣低像素的情況下，想保證在網(wǎng)頁保持清晰，其實(shí)是非常難的。

我曾經(jīng)試過各種方法，包括繪制矢量圖形，存成png或web格式，可放到網(wǎng)站總會(huì)出現(xiàn)鋸齒，顯得十分模糊。

以前大多采用比較麻煩的方式來處理，一是運(yùn)用svg矢量的圖標(biāo)運(yùn)用到網(wǎng)頁當(dāng)中，不過我感覺很復(fù)雜，總之到現(xiàn)在我還沒學(xué)會(huì)。另一種，是一個(gè)像素一個(gè)像素的調(diào)整，調(diào)整到不出現(xiàn)鋸齒為止，但這種方法真的超級麻煩又費(fèi)事，像我這樣焦急癥豈不要活活急死。

直到后來出現(xiàn)了新的解決方法，比如font awesome，在其網(wǎng)站上下載一套矢量圖標(biāo)，上傳到自己的服務(wù)器，需要某個(gè)圖標(biāo)時(shí)就調(diào)用出來。但是現(xiàn)在幾乎很少人使用這種方法了，一是占用自己服務(wù)器空間資源，二是想使用新的圖標(biāo)又要重新從網(wǎng)站上下載需要的圖標(biāo)，有時(shí)還不一定有自己想要的。

現(xiàn)在我來介紹一款比較實(shí)用的工具，iconfont（阿里巴巴矢量圖標(biāo)庫）。顧名思義圖標(biāo)是矢量的，無論多大或多小都不會(huì)存在模糊狀況，輕輕松解決了圖標(biāo)模糊的問題。不僅可以免費(fèi)使用，上面還有大量已設(shè)計(jì)好的圖標(biāo)供你選擇。

所有圖標(biāo)在阿里云端上存儲(chǔ)，不占用自己服務(wù)器空間內(nèi)存，還能起到網(wǎng)站加速作用。支持自定義上傳自己設(shè)計(jì)的圖標(biāo)，更換添加圖標(biāo)只需要更新一行代碼，還支持自定義改變顏色大小，總之所有的一切，都盡掌握在你的css代碼中，想怎么搞就怎么搞。

具體使用，iconfont官網(wǎng)上講解的已經(jīng)足夠詳細(xì)了，你可以去瀏覽學(xué)習(xí)一下，如果在使用過程中有什么疑惑或新發(fā)現(xiàn)，也可以在下方和我留言交流學(xué)習(xí)。