為什么要將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聲明字體：

發(fā)表評(píng)論 共有條評(píng)論 用戶(hù)名: 密碼: 驗(yàn)證碼: 匿名發(fā)表