CSS3 icon font徹底指南

你們都知道如今各個瀏覽器都支持CSS3的自定義字體(@font-face)，包括IE6都支持，只是各自對字體文件格式的支持不太同樣。那麼對於網站中用到的各類icon，咱們就能夠嘗試使用font來實現，本文將詳細講解這種用法。

 

爲何要將icon作成字體？

在不少網站項目中，咱們經常會用到各類透明小圖標，而後網站要兼容各個瀏覽器，也可能會有多個尺寸，甚至還要考慮換膚等需求。那麼咱們就要將這些小圖標輸出爲多種尺寸、顏色和文件格式，好比png8 alpha透明或者png8 index透明等。

好比，twitter用到的各類小icon：

這種狀況下，使用字體來實現圖標就有不少優點：

• 字體文件小，通常20-50kb；
• 容易編輯和維護，尺寸和顏色能夠用css來控制；
• 透明徹底兼容IE6；

如何將icon變成字體？

最關鍵的是要將設計稿中的icon(要有矢量路徑，位圖無法轉化)完美還原成字體，這並非很麻煩。

咱們要用到一些字體編輯軟件，好比FontCreator、FontLab等，這裏咱們用FontLab來演示。

還原步驟很簡單：

PSD–>eps–>FontLab，即將PSD轉換爲illustrator的eps格式，而後將某個字符複製到FontLab中便可。

具體步驟：

打開設計稿psd，將其保存爲Photoshop eps格式，咱們這裏以Qzone中說說發表框的表情icon爲例：

在illustrator中打開保存的eps文件：

取消分組，而後點選某個icon，複製。

打開FontLab，隨便打開一款字體文件，好比tahoma.ttf：

而後雙擊某個字符，將原有圖形刪除，粘貼剛纔複製的icon對象：

調整圖形大小，一個icon就完成還原了。

就是這麼簡單。全部icon還原完以後，生成字體文件就能夠了。

查看字體對應字符，能夠在字體列表中，在某個字體上右鍵查看屬性(快捷鍵Alt+Enter)，查看該字體對應的字符：

能夠看到字體對應的字符是i，unicode編碼是0069。

字體格式的瀏覽器支持：

目前，各個瀏覽器對字體格式的支持是最大的區別：

• webkit/safari：支持TrueType/OpenType(.ttf)，OpenType PS(.otf)，iOS4.2+支持.ttf，iOS 4.2如下只支持SVG字體；
• Chrome：除webkit支持的之外，從Chrome 6開始，開始支持woff格式；
• Firefox：支持.ttf和.otf，從Firefox 3.6開始支持woff格式；
• Opera：支持.ttf、.otf、.svg。尚不支持woff Opera 11開始支持WOFF(多謝Apostle提醒~~)；
• IE：只支持eot格式，IE9開始支持woff。

注：以上資料來自於：webfonts.info

注：woff是最新的web開放字體格式(web open font format)，w3c推薦，主要優點是針對瀏覽器進行優化，字體文件小。詳情可查看wiki：

在CSS中使用icon字體：

先使用font-face聲明字體：

1 2 3 4 5 6 7 8

@font-face { font-family: 'emotion'; src: url('emotion.eot'); /* IE9*/ src: url('emotion.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('emotion.woff') format('woff'), /* chrome、firefox */ url('emotion.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('emotion.svg#svgFontName') format('svg'); /* iOS 4.1- */ }

而後，在icon元素上使用該字體就行了：

1 2 3

.icon{font-family:"emotion" Tahoma; ... }

最後，在頁面中使用這個字體：

<span class="icon">i</span>

支持CSS3的瀏覽器能夠更上流一點兒，咱們每次修改html可能沒那麼方便，若是要改變某個icon，則可能須要修改相關字符，好比將i修改成e等。若是使用css3的僞元素，能夠方便不少：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

.icon{ display:inline-block; width:16px; height:16px;/*佔個位**/ ... } .icon:after,.icon::after{ font-family:"emotion" Tahoma; display:inline-block; content:"i";/*在這裏調用字符*/ width:16px; height:16px; margin-left:-16px;/*position:absolute什麼的也能夠，看具體狀況*/ }

嗯，就是用實際元素佔位，用僞元素+content屬性顯示icon，而後覆蓋到實際元素上面，以後咱們修改某個icon只須要更改css樣式就能夠了。

IE依然棘手：

由於IE9之前只支持eot格式，因此須要將ttf轉換爲eot先，這裏可使用微軟官方的WEFT軟件，也可使用一些在線工具：

• http://www.kirsle.net/wizards/ttf2eot.cgi 在線轉ttf爲eot格式；
• http://www.fontsquirrel.com/fontface/generator強大的在線轉ttf爲eot、woff等字體格式

另外，eot文件必須添加域名白名單纔可使用，這裏推薦使用CreateMyEOT：

總結：

其實，這種方法有一個不足，就是只支持純色icon，最多能高端瀏覽器上實現漸變色或圖形蒙板。

固然，咱們有不少場景是用純色icon，特別是在Windows 8這種Metro UI開始愈來愈多的時候。

另外，這種方法能夠有效減小頁面的請求，可是對於習慣使用CSSGaGa的auto sprite功能的同窗來講，這種方法對頁面性能的提高不大。

可是對於移動終端，特別是webapp中，這種方法仍是有很大的用武之地的，能夠很方便的兼容多分辨率，配合離線存儲效果更佳。

若是你有這方面更好的建議和意見，歡迎提出。