圖標(biāo)字體化淺談

在做手機(jī)端Web App項(xiàng)目中,經(jīng)常會(huì)遇到小圖標(biāo)在手機(jī)上顯示比較模糊的問題，經(jīng)過實(shí)踐發(fā)現(xiàn)了一種比較好的解決方案，圖標(biāo)字體化。在微社區(qū)項(xiàng)目中，有很多小的Icon（圖標(biāo)），如分享、回復(fù)、贊、返回、話題、訪問、箭頭等，這些Icon（圖標(biāo)）一般都是純色的。開始制作時(shí)考慮用雙倍大小的Sprite圖，通過CSS樣式設(shè)置只顯示二分之一尺寸，這樣在Retina屏上顯示的大小是正常的，一旦放大屏幕后圖標(biāo)又變得模糊不清，測試的效果不是很理想，后來又考慮多套圖標(biāo)適配方案、SVG矢量圖等，都因?yàn)榉N種原因放棄掉了（如多套圖標(biāo)繁瑣、Android 2.3不支持SVG格式等），為了解決以上問題，用到了圖標(biāo)字體， 通過查閱Icon Font相關(guān)技術(shù)博客和文章，并結(jié)合在項(xiàng)目中實(shí)際應(yīng)用梳理出了圖標(biāo)字體化淺談這篇文章，望對正在學(xué)習(xí)和使用的重構(gòu)同學(xué)們有一個(gè)參考和幫助！文章內(nèi)的內(nèi)容參考了相關(guān)技術(shù)文章并加上自已的理解，錯(cuò)誤在所難免，歡迎批評指正。下圖為微社區(qū)用到的部分圖標(biāo)字體。

使用圖標(biāo)字體的優(yōu)勢和劣勢

字體圖標(biāo)除了圖像清晰度之外，比位圖還有哪些優(yōu)勢呢?
1、輕量性：一個(gè)圖標(biāo)字體比一系列的圖像（特別是在Retina屏中使用雙倍圖像）要小。一旦圖標(biāo)字體加載了，圖標(biāo)就會(huì)馬上渲染出來，不需要下載一個(gè)圖像?？梢詼p少HTTP請求，還可以配合HTML5離線存儲做性能優(yōu)化。

2、靈活性：圖標(biāo)字體可以用過font-size屬性設(shè)置其任何大小，還可以加各種文字效果，包括顏色、Hover狀態(tài)、透明度、陰影和翻轉(zhuǎn)等效果?？梢栽谌魏伪尘跋嘛@示。使用位圖的話，必須得為每個(gè)不同大小和不同效果的圖像輸出一個(gè)不同文件。

3、兼容性：網(wǎng)頁字體支持所有現(xiàn)代瀏覽器，包括IE低版本。

除了以上優(yōu)勢之外，當(dāng)然也有劣勢
1、圖標(biāo)字體只能被渲染成單色或者CSS3的漸變色，由于此限制使得它不能廣泛使用。
2、使用版權(quán)上有限制，有好多字體是收費(fèi)的。當(dāng)然也有很多免費(fèi)開源的精美字體圖標(biāo)供下載使用。
3、創(chuàng)作自已的字體圖標(biāo)很費(fèi)時(shí)間，重構(gòu)人員后期維護(hù)的成本偏高。

如何獲取圖標(biāo)字體及使用

要想獲取圖標(biāo)字體，不外乎兩種途徑，其一找到付費(fèi)網(wǎng)站購買，其二就是到免費(fèi)網(wǎng)站下載，提供免費(fèi)下載網(wǎng)站很多，神飛曾經(jīng)發(fā)表過一篇博客icon font大搜羅，上面羅列好多的免費(fèi)網(wǎng)站的地址，大家有興趣可以去下載。如何使用呢？一般來說，有3種方法：
1、把字符直接寫在HTML文件里；
這個(gè)方法是簡單比較直觀，見如下代碼，用一個(gè)<span>元素去包含一個(gè)字符“!”(或&#x0021;)，然后給這個(gè)<span>添加一個(gè)類。這個(gè)字母在選定的字體中被映射到一個(gè)特定的圖標(biāo)。

為了顯示效果，還需要編寫樣式類.Icon來決定此字符以哪種字體來顯示，如下：

2、使用css來生成內(nèi)容；
它不直接在HTML文件里添加字符，而是用CSS來生成字符內(nèi)容。代碼如下

可以看出，添加了一個(gè)類名“praise”。神奇的事就發(fā)生在CSS中，跟上面一樣，第一步先定義好字體，然后使用:before偽元素來產(chǎn)生字符圖標(biāo)，其中“before”表示字符出現(xiàn)在左邊，“after”則出現(xiàn)在右邊。

3、用data-icon屬性
還有一種跟上面相似方法是使用HTML5的“data-”屬性。如：創(chuàng)建一個(gè)data-icon屬性。
aria-hidden=”true”是為了防止被閱讀器直接把字符讀取出來，不是對所有的平臺都奏效。

結(jié)合一些搭配使用的CSS屬性，可以寫成如下代碼

制作自已圖標(biāo)字體

以上是免費(fèi)圖標(biāo)字體使用的幾種方法，下面看看如何制作屬于自己的圖標(biāo)字體。

1、首先需要有創(chuàng)建矢量圖標(biāo)的軟件，并且能夠輸出SVG格式，比如“Illustrator”或者“Inkscape”。也可以用Photoshop的路徑工具畫出所需要的圖標(biāo)，然后導(dǎo)出路徑到Illustrator里去填色。 下圖為Adobe Illustrator軟件。

注意一定是封閉的路徑，不能是單路徑描邊，如果是單路徑的話生成字體圖標(biāo)后會(huì)顯示不出來。兩個(gè)以上的圖形要合并、圖形盡減少節(jié)點(diǎn)使用。如下圖，中間的圖(嘴巴部分)為單路徑描邊（不封閉）,導(dǎo)入圖標(biāo)生成器后會(huì)如右圖所示，嘴巴部分顯示不出來。

2、圖標(biāo)制作完成后，選擇 “文件”菜單中“保存”，把文件保存成“SVG”格式。使用默認(rèn)的SVG設(shè)置。
3、把SVG格式的圖標(biāo)導(dǎo)入到icomoon、fontello、iconfont字體生成器中，去生成所要的圖標(biāo)字體，以下介紹一下幾種字體生成器的用法：
（1）圖標(biāo)字體生成器http://icomoon.io/app/
IcoMoon！一個(gè)可以通過個(gè)性化設(shè)置來創(chuàng)建自定義圖標(biāo)（字體）的生成器！IcoMoon是一項(xiàng)免費(fèi)的服務(wù)，通過使用不同設(shè)置使我們能夠創(chuàng)建自定義的Icon圖或Icon字體。除了自定義Icon外，IcoMoon也有自己免費(fèi)的海量圖標(biāo)集，都非常贊。
打開地址，點(diǎn)擊Start the App按鈕。

點(diǎn)擊Import Icons按鈕導(dǎo)入SVG圖標(biāo)，導(dǎo)入后對圖標(biāo)進(jìn)行相關(guān)的操作，如選中、刪除、移動(dòng)、編輯等。

編輯完成后，就可以進(jìn)行下載了，它提供兩種下載方式：圖片版和字體版！圖片版是經(jīng)過CSS Sprites技術(shù)處理的PNG格式，字體版有多種格式供我們選擇（EOT,SVG,WOFF,TTF）。

如果要兼容IE7以下瀏覽器，請?jiān)谠O(shè)置里勾選Support IE7(and older)選項(xiàng)，會(huì)生成一個(gè)單獨(dú)JS、CSS文件。

下載ZIP包后，解壓后會(huì)得到如下圖的文件。將fonts文件夾復(fù)制到你的網(wǎng)站，為項(xiàng)目添加字體。
從style.css文件中復(fù)制CSS樣式，并粘貼到你網(wǎng)站的CSS文件中，也可以單獨(dú)存成一個(gè)樣式文件。

復(fù)制完成后，在CSS文件中找到@font-face，將URL路徑修改成你本地的相對路徑。

字體和路徑都設(shè)置完成后，在HTML頁面只需調(diào)用相對應(yīng)的class就可以了。如果想兼容IE7瀏覽器，需引用IE7目錄的js。如：

調(diào)用class：<span class=”icon icon-add”></span>
調(diào)用js：<script src=”ie7/ie7.js”></script>

（2）圖標(biāo)字體生成器http://fontello.com/

它的生成方式與上面的類同，這里不做介紹，很容易上手。

（3）ISUX矢量字體圖標(biāo)庫http://font.isux.us/

ISUX矢量字體庫目前提供了豐富的字體圖標(biāo)，可以供下載使用，暫時(shí)還不支持自定義圖標(biāo)的導(dǎo)入，期待不久的將來它的功能會(huì)越來越完善。大家有什么好的建議和想法可以聯(lián)系他們。

通過以上幾種生成器的生成圖標(biāo)字體，加上用CSS對其大小、顏色、透明度、陰影、Transition各種變換等控制，不僅可以縮放自如，制作出各種特殊效果，而且還很容易維護(hù)，可以通過多種不同的途徑對它們進(jìn)行操作。相信大家已經(jīng)體驗(yàn)到他的強(qiáng)大之處，滿足日常工作需要應(yīng)該已經(jīng)足夠了。雖然有這么多優(yōu)點(diǎn)，但圖標(biāo)字體并不是完美的，也存在些缺點(diǎn)。如：只能被渲染成單色的問題、屏幕閱讀器(雖然有解決方法，但并不完善)的問題、性能問題等等， 等待著我們?nèi)グl(fā)現(xiàn)和解決。相信未來會(huì)有更好的解決方案，比如：SVG（可伸縮矢量圖形），未來可能取代位圖的圖形技術(shù)等。
立足現(xiàn)在，放眼未來。最后對目前的圖標(biāo)字體生成器工具做一下展望吧！
■ 能夠支持導(dǎo)入更多的自定義格式，如EPS、AI等格式。
■ 能夠引入項(xiàng)目管理的機(jī)制， 在同一帳號可以同時(shí)管理多個(gè)項(xiàng)目圖標(biāo)。
■ 提供更多免費(fèi)、豐富的圖標(biāo)字體供下載使用。

FAQ

1、跨域問題：
（1）通過配置自己的服務(wù)器。
# For Apache
<FilesMatch “.(eot|ttf|otf|woff)”>
Header set Access-Control-Allow-Origin “*”
</FilesMatch>
# For nginx
location ~* .(eot|ttf|woff)$ {
add_header Access-Control-Allow-Origin *;
}
（2）放在同一個(gè)域下。
（3）使用base64置入CSS中(Icomoon在導(dǎo)出圖標(biāo)時(shí)，設(shè)置里勾選Encode & Embed Font in CSS選項(xiàng))。
2、字體圖標(biāo)出現(xiàn)鋸齒的問題：
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
3、@font-face與性能：
關(guān)于@font-face的性能問題，可以參考以下文章。
原文地址：http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/
翻譯地址：http://www.cnblogs.com/demix/archive/2009/11/28/1612715.html
文章內(nèi)的建議和總結(jié):
（1）只在你確定你非常需要 @font-face的時(shí)候才使用它;
（2）將你的@font-face定義在所有的script標(biāo)簽前;
（3）如果你有許多字體文件，考慮將它們分散到幾個(gè)域名下;
（4）不要包含沒有使用的 @font-face聲明——IE將不分它使用與否，通通加載;
（5）Gzip字體文件，同時(shí)給它們一個(gè)未來的過期頭部聲明;
（6）考慮字體文件的后加載，起碼對于IE。

參考文章：
http://www.qianduan.net/icon-font-large-collecting.html
http://www.w3cplus.com/css3/icon-fonts.html
http://www.adobe.com/cn/devnet/html5/articles/web-typography-and-css-font-face.html
http://www.cnblogs.com/JogYourLive/articles/3070304.html
http://www.w3help.org/zh-cn/causes/RF1001