DIV CSS 佈局教程網

 這種思路是在一個國外的網站上發現的，設計者在網站中使用了很多小圖標，但是並沒有使用CSS-Sprite技術，而是使用了另外一種特殊的辦法。那就是css3的font-face技術載入了一個自己做的字體文件，在需要顯示的地方直接打上調用的字符。

這種辦法只適用於大量純色，至於數量貌似沒有上限，a-z+0-9+符號就夠用了，狠一點，插入中文，動辄幾千個單位…

font-face圖標 VS CSS-Sprite圖標

他們同樣是把N多個圖標合並到一次HTTP請求中，CSS-Sprite是我們經常用的方法，它幾乎可以把所有不需要平鋪的圖片全部放進去，然後來定位。

而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則不太容易管理，特別是圖片和大小都要變更的時候。