大家都知道現(xiàn)在各個(gè)瀏覽器都支持CSS3的自定義字體(@font-face)，包括IE6都支持，只是各自對(duì)字體文件格式的支持不太一樣。那么對(duì)于網(wǎng)站中用到的各種icon，我們就可以嘗試使用font來(lái)實(shí)現(xiàn)，本文將詳細(xì)講解這種用法。
為什么要將icon做成字體？
在很多網(wǎng)站項(xiàng)目中，我們常常會(huì)用到各種 透明 小圖標(biāo)，然后網(wǎng)站要兼容各個(gè)瀏覽器，也可能會(huì)有多個(gè)尺寸，甚至還要考慮換膚等需求。那么我們就要將這些小圖標(biāo)輸出為多種尺寸、顏色和文件格式，比如png8 alpha透明或者png8 index透明等。
比如，twitter用到的各種小icon：
這種情況下，使用字體來(lái)實(shí)現(xiàn)圖標(biāo)就有很多優(yōu)勢(shì)：
- 字體文件小，一般20-50kb；
- 容易編輯和維護(hù)，尺寸和顏色可以用css來(lái)控制；
- 透明完全兼容IE6；
如何將icon變成字體？
最關(guān)鍵的是要將設(shè)計(jì)稿中的icon(要有矢量路徑，位圖沒(méi)法轉(zhuǎn)化)完美還原成字體，這并不是很麻煩。
我們要用到一些字體編輯軟件，比如FontCreator、FontLab等，這里我們用FontLab來(lái)演示。
還原步驟很簡(jiǎn)單：
PSD–>eps–>FontLab，即將PSD轉(zhuǎn)換為illustrator的eps格式，然后將某個(gè)字符復(fù)制到FontLab中即可。
具體步驟：
打開(kāi)設(shè)計(jì)稿psd，將其保存為Photoshop eps格式，我們這里以Qzone中說(shuō)說(shuō)發(fā)表框的表情icon為例：
在illustrator中打開(kāi)保存的eps文件：
取消分組，然后點(diǎn)選某個(gè)icon，復(fù)制。
打開(kāi)FontLab，隨便打開(kāi)一款字體文件，比如tahoma.ttf：
然后雙擊某個(gè)字符，將原有圖形刪除，粘貼剛才復(fù)制的icon對(duì)象：
調(diào)整圖形大小，一個(gè)icon就完成還原了。
就是這么簡(jiǎn)單。所有icon還原完之后，生成字體文件就可以了。
查看字體對(duì)應(yīng)字符，可以在字體列表中，在某個(gè)字體上右鍵查看屬性(快捷鍵Alt+Enter)，查看該字體對(duì)應(yīng)的字符：
可以看到字體對(duì)應(yīng)的字符是i，unicode編碼是0069。
字體格式的瀏覽器支持：
目前，各個(gè)瀏覽器對(duì)字體格式的支持是最大的區(qū)別：
- webkit/safari：支持TrueType/OpenType(.ttf)，OpenType PS(.otf)，iOS4.2+支持.ttf，iOS 4.2以下只支持SVG字體；
- Chrome：除webkit支持的以外，從Chrome 6開(kāi)始，開(kāi)始支持woff格式；
- Firefox：支持.ttf和.otf，從Firefox 3.6開(kāi)始支持woff格式；
-
Opera：支持.ttf、.otf、.svg。
尚不支持woff?Opera 11開(kāi)始支持WOFF(多謝Apostle提醒~~)； - IE：只支持eot格式，IE9開(kāi)始支持woff。
注：以上資料來(lái)自于： webfonts.info
注：woff是最新的web開(kāi)放字體格式(web open font format)，w3c推薦，主要優(yōu)勢(shì)是針對(duì)瀏覽器進(jìn)行優(yōu)化，字體文件小。詳情可查看 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
;
...
}
|
最后，在頁(yè)面中使用這個(gè)字體：
<
span
class
=
"icon"
>
i
<
/
span
>
|
支持CSS3的瀏覽器可以更上流一點(diǎn)兒，我們每次修改html可能沒(méi)那么方便，如果要改變某個(gè)icon，則可能需要修改相關(guān)字符，比如將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
;
/*占個(gè)位**/
...
}
.icon
:after
,
.icon
:
:after
{
font-family
:
"emotion"
Tahoma
;
display
:inline-
block
;
content
:
"i"
;
/*在這里調(diào)用字符*/
width
:
16px
;
height
:
16px
;
margin-left
:
-16px
;
/*position:absolute什么的也可以，看具體情況*/
}
|
嗯，就是用實(shí)際元素占位，用偽元素+content屬性顯示icon，然后覆蓋到實(shí)際元素上面，之后我們修改某個(gè)icon只需要更改css樣式就可以了。
IE依然棘手：
因?yàn)镮E9以前只支持eot格式，所以需要將ttf轉(zhuǎn)換為eot先，這里可以使用微軟官方的WEFT軟件，也可以使用一些在線工具：
- http://www.kirsle.net/wizards/ttf2eot.cgi ?在線轉(zhuǎn)ttf為eot格式；
- http://www.fontsquirrel.com/fontface/generator 強(qiáng)大的在線轉(zhuǎn)ttf為eot、woff等字體格式
另外，eot文件必須添加域名白名單才可以使用，這里推薦使用CreateMyEOT：
總結(jié)：
其實(shí)，這種方法有一個(gè)不足，就是 只支持純色icon ，最多能高端瀏覽器上實(shí)現(xiàn)漸變色或圖形蒙板。
當(dāng)然，我們有很多場(chǎng)景是用純色icon，特別是在Windows 8這種Metro UI開(kāi)始越來(lái)越多的時(shí)候。
另外，這種方法可以有效減少頁(yè)面的請(qǐng)求，但是對(duì)于習(xí)慣使用 CSSGaGa 的auto sprite功能的同學(xué)來(lái)說(shuō)，這種方法對(duì)頁(yè)面性能的提升不大。
但是對(duì)于移動(dòng)終端，特別是webapp中，這種方法還是有很大的用武之地的，可以很方便的兼容多分辨率，配合離線存儲(chǔ)效果更佳。
如果你有這方面更好的建議和意見(jiàn)，歡迎提出。
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫(xiě)作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
