這種思路是在一個(gè)國(guó)外的網(wǎng)站上發(fā)現(xiàn)的，設(shè)計(jì)者在網(wǎng)站中使用了很多小圖標(biāo)，但是并沒(méi)有使用CSS-Sprite技術(shù)，而是使用了另外一種特殊的辦法。那就是css3的font-face技術(shù)載入了一個(gè)自己做的字體文件，在需要顯示的地方直接打上調(diào)用的字符。

這種辦法只適用于大量純色，至于數(shù)量貌似沒(méi)有上限，a-z+0-9+符號(hào)就夠用了，狠一點(diǎn)，插入中文，動(dòng)輒幾千個(gè)單位…

font-face圖標(biāo) VS CSS-Sprite圖標(biāo)

一種比CSS-Sprite更加方便在網(wǎng)頁(yè)中嵌入大量圖標(biāo)的方法 三聯(lián)

他們同樣是把N多個(gè)圖標(biāo)合并到一次HTTP請(qǐng)求中，CSS-Sprite是我們經(jīng)常用的方法，它幾乎可以把所有不需要平鋪的圖片全部放進(jìn)去，然后來(lái)定位。

而CSS-Sprite的弊端就是定位，想朽木這樣做前端的，幾乎天天跟background-position打交道，XY一個(gè)像素也不能差，雖說(shuō)有這方面的工具，但是工作量還是放大了好幾倍。

而font-face則不需要定位，只要對(duì)照著字體編輯器，就可以知道哪個(gè)字符對(duì)應(yīng)的哪個(gè)圖標(biāo)。使用起來(lái)非常方便

<style type="text/css" media="screen">

<!--

i{font-family:'自定義字體名字';color:#000;}

i:hover{color:#0f0;}

-->

</style>

<div>

<li><i>A</i>某某某</li>

<li><i>B</i>某某某</li>

<li><i>C</i>某某某</li>

</div>

A/B/C就會(huì)自動(dòng)變成我們字體中所對(duì)應(yīng)的圖標(biāo)，怎么樣，很方便吧，但是font-face有局限性，就是必須是純色圖標(biāo)，因?yàn)樽煮w只能給它附加color屬性來(lái)改變顏色。

從維護(hù)方面來(lái)說(shuō)，font-face方法要方便的多，更換/添加/圖標(biāo)非常容易，而CSS-Sprite則不太容易管理，特別是圖片和大小都要變更的時(shí)候。

更多信息請(qǐng)查看IT技術(shù)專欄