這種思路是在一個國外的網(wǎng)站上發(fā)現(xiàn)的，設計者在網(wǎng)站中使用了很多小圖標，但是并沒有使用CSS-Sprite技術，而是使用了另外一種特殊的辦法。那就是css3的font-face技術載入了一個自己做的字體文件，在需要顯示的地方直接打上調用的字符。
這種辦法只適用于大量純色，至于數(shù)量貌似沒有上限，a-z+0-9+符號就夠用了，狠一點，插入中文，動輒幾千個單位…
font-face圖標 VS CSS-Sprite圖標
一種比CSS-Sprite更加方便在網(wǎng)頁中嵌入大量圖標的方法 三聯(lián)
他們同樣是把N多個圖標合并到一次HTTP請求中，CSS-Sprite是我們經(jīng)常用的方法，它幾乎可以把所有不需要平鋪的圖片全部放進去，然后來定位。
而CSS-Sprite的弊端就是定位，想朽木這樣做前端的，幾乎天天跟background-position打交道，XY一個像素也不能差，雖說有這方面的工具，但是工作量還是放大了好幾倍。
而font-face則不需要定位，只要對照著字體編輯器，就可以知道哪個字符對應的哪個圖標。使用起來非常方便
<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就會自動變成我們字體中所對應的圖標，怎么樣，很方便吧，但是font-face有局限性，就是必須是純色圖標，因為字體只能給它附加color屬性來改變顏色。
從維護方面來說，font-face方法要方便的多，更換/添加/圖標非常容易，而CSS-Sprite則不太容易管理，特別是圖片和大小都要變更的時候。
更多信息請查看IT技術專欄
公眾號
事業(yè)單位
當前位置：
公考類
招聘類
各類考試