zhaolei：現(xiàn)在再提起Icon Font，已經(jīng)不是什么新鮮的詞匯了，網(wǎng)上已經(jīng)有很多介紹它的文章，并且很多網(wǎng)站也已經(jīng)將它用到，本篇主要是將制作Icon Font的整個流程整理一下，并且加入了自己在制作中遇到的問題，使得大家可以在今后使用的時候可以很快上手并且避免這些問題。

推薦閱讀：
《未來大趨勢——響應(yīng)式圖標(biāo)》
《手把手教！用PS設(shè)計一枚IOS 7風(fēng)格日記圖標(biāo)》
《推薦！萬圣節(jié)專題素材全收集 (ICON+模版+教程+圖片)》

一、首先要說的是，什么是Icon Font？

我認為，我們現(xiàn)在通常所指的Icon Font，是用字體文件取代圖片文件，來展示圖標(biāo)、特殊字體等元素的方法。

二、知道了什么是Icon Font之后，我們要了解它能干什么，大家是怎么用的

這是一淘網(wǎng)用到Icon Font的地方

這是新浪微博微吧用到Icon Font的地方

這里還有我們自己做的小浪人

三、下面我們自然要看看Icon Font都有什么優(yōu)缺點了，從而決定我們是否要使用它

首先它的體積要比圖片小的多

這是做出來的一組Icon Font字體文件，試想一下如果這是圖片的話要有多大，50K？100K？甚至更多？然而現(xiàn)在這個文件的大小僅僅只有13K

不僅體積小，而且還具有更好的可維護性（因為是矢量，所以拉伸不變形；顏色可以自行更換，支持一些CSS3對文字的效果）

像這些圖片完全可以用Icon Font制作

并且還可以通過base64置于CSS內(nèi)，從而不產(chǎn)生圖片的http請求

當(dāng)然，Icon Font也是有缺點的，由于是字體，所以只支持圖片上是純色的，多種顏色的就不支持了

這其中的表情有多種顏色，因此就沒法使用Icon Font了

但是在Win8下大量的純色圖標(biāo)的出現(xiàn)，是否是Icon Font可以普及的一個機會呢？

雖然制作Icon Font自然而然要增加重構(gòu)的成本，但是跟后期維護相比還是值得的

四、Icon Font的優(yōu)點明顯要大于缺點，并且有可以使用的空間，因此我們決定使用它之后，就要學(xué)會怎么去制作Icon Font

在制作之前我們要知道需要什么工具，其實很簡單，只需要FontCreator，PS這兩個工具即可。

制作的過程，首先需要我們的設(shè)計師給出Icon的矢量圖，我們需要在PS中將這個Icon圖層?xùn)鸥窕蟊４鏋閜ng24，再在FontCreator中通過圖片導(dǎo)入到字體中，進行大小的調(diào)整（下面會給出字體制作各個值的用處，本人覺得比較重要的就是離左右的寬度以及離baseline的距離，最好一類icon的布局的一樣的，這樣也方便對齊），最后通過在線工具將字體文件轉(zhuǎn)換成我們需要的多種格式。

這是字體各個值的含義

因為不同的瀏覽器所支持的字體問題時有差別的,因此我們需要將我們制作好的字體轉(zhuǎn)換成多種格式,附上一個比較好的字體轉(zhuǎn)換在線地址：
fontsquirrel?我們轉(zhuǎn)換的時候如果沒有特殊需要，直接通過basic轉(zhuǎn)換就可以

五、制作完成后我們當(dāng)然是要使用它了

首先是字體聲明，由于各個瀏覽器所支持的字體文件不同，因此我們要針對瀏覽器的這個特點制作多種字體文件以達到兼容的目的

要在網(wǎng)頁中顯示，目前有兩種方式，一種是直接在html中輸入相應(yīng)的Icon所代表的字體，好處是兼容所有瀏覽器，就是在更改Icon的時候需要下游的后端程序員同事協(xié)助更改。

另一種方法是在CSS中通過after偽類添加，這樣可以通過CSS直接控制Icon的類別，只是不是所有瀏覽器都兼容,但是我們必須考慮到IE6的用戶。

通過分析現(xiàn)在開發(fā)的流程以及項目，用第一種方法在html中直接輸入是比較合適的。

當(dāng)然了，我們輸入的時候怎么去知道要輸入的字符是我要輸入的Icon呢？只需要通過查閱Unicode對照表，根據(jù)字體制作軟件中的Unicode碼進行對比即可。

我們制作Icon Font是為了自己之后使用的，因為一個方便管理并且使用的html組件頁面是必不可少的，其中應(yīng)該包括對Icon的描述、所對應(yīng)的代碼等等這些信息，目的就是在自己或者同事使用的時候可以很方便。

個人心得：

在制作Icon Font的過程中，自己也遇到了一些問題

?跨域問題，這個屬于老生常談了，通過配置自己的服務(wù)器或者放在同域下都可以解決，還可以使用base64置入CSS中。
?制作字體文件的時候一定要記得不要為了是文件過小而瞎刪里面的東西

這個軟件中前面的這幾個一定不要刪，否則大部分瀏覽器都讀不出來這個字體文件。

如果從PS導(dǎo)出的PNG24在導(dǎo)入字體文件的時候發(fā)生了變形，可以嘗試把PS中的矢量圖等比拉大后在存成PNG24導(dǎo)入。

原文地址：ued.sina
作者：zhaolei

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊：網(wǎng)頁設(shè)計師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計指南http://hao.uisdc.com/ps/。
設(shè)計微博：擁有粉絲量58萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：