圖標字體化淺談

本文轉載自:http://isux.tencent.com/icon-font.html

 

在作手機端Web App項目中,常常會遇到小圖標在手機上顯示比較模糊的問題，通過實踐發現了一種比較好的解決方案，圖標字體化。在微社區項目中，有不少小的Icon（圖 標），如分享、回覆、贊、返回、話題、訪問、箭頭等，這些Icon（圖標）通常都是純色的。開始製做時考慮用雙倍大小的Sprite圖，經過CSS樣式設 置只顯示二分之一尺寸，這樣在Retina屏上顯示的大小是正常的，一旦放大屏幕後圖標又變得模糊不清，測試的效果不是很理想，後來又考慮多套圖標適配方 案、SVG矢量圖等，都由於種種緣由放棄掉了（如多套圖標繁瑣、Android 2.3不支持SVG格式等），爲了解決以上問題，用到了圖標字體， 經過查閱Icon Font相關技術博客和文章，並結合在項目中實際應用梳理出了圖標字體化淺談這篇文章，望對正在學習和使用的重構同窗們有一個參考和幫助！文章內的內容參 考了相關技術文章並加上自已的理解，錯誤在所不免，歡迎批評指正。下圖爲微社區用到的部分圖標字體。

使用圖標字體的優點和劣勢

字體圖標除了圖像清晰度以外，比位圖還有哪些優點呢?
一、輕量性：一個圖標字體比一系列的圖像（特別是在Retina屏中使用雙倍圖像）要小。一旦圖標字體加載了，圖標就會立刻渲染出來，不須要下載一個圖像。能夠減小HTTP請求，還能夠配合HTML5離線存儲作性能優化。

二、靈活性：圖標字體能夠用過font-size屬性設置其任何大小，還能夠加各類文字效果，包括顏色、Hover狀態、透明度、陰影和翻轉等效果。能夠在任何背景下顯示。使用位圖的話，必須得爲每一個不一樣大小和不一樣效果的圖像輸出一個不一樣文件。

三、兼容性：網頁字體支持全部現代瀏覽器，包括IE低版本。詳細兼容性能夠點擊這裏。

除了以上優點以外，固然也有劣勢
一、圖標字體只能被渲染成單色或者CSS3的漸變色，因爲此限制使得它不能普遍使用。
二、使用版權上有限制，有好多字體是收費的。固然也有不少免費開源的精美字體圖標供下載使用。
三、創做自已的字體圖標很費時間，重構人員後期維護的成本偏高。

如何獲取圖標字體及使用

要想獲取圖標字體，不外乎兩種途徑，其一找到付費網站購買，其二就是到免費網站下載，提供免費下載網站不少，神飛曾經發表過一篇博客icon font大搜羅，上面羅列好多的免費網站的地址，你們有興趣能夠去下載。如何使用呢？通常來講，有3種方法：
一、把字符直接寫在HTML文件裏；
這個方法是簡單比較直觀，見以下代碼，用一個<span>元素去包含一個字符「!」(或&#x0021;)，而後給這個<span>添加一個類。這個字母在選定的字體中被映射到一個特定的圖標。

<a href=」javascript:;」><span cass=」icon」>!</span>贊</a><a href=」javascript:;」><span cass=」icon」>&#x0021;</span>贊</a>

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

.icon {font-family: ‘ your-incofont -name ‘;}

二、使用css來生成內容；
它不直接在HTML文件裏添加字符，而是用CSS來生成字符內容。代碼以下

<a href=」javascript:;」 class=」icon praise」>贊</a>

能夠看出，添加了一個類名「praise」。神奇的事就發生在CSS中，跟上面同樣，第一步先定義好字體，而後使用:before僞元素來產生字符圖標，其中「before」表示字符出如今左邊，「after」則出如今右邊。

.icon {font-family:’ your-incofont-name’ ;}.praise:before {content: 「\f00a」; }

三、用data-icon屬性
還有一種跟上面類似方法是使用HTML5的「data-」屬性。如：建立一個data-icon屬性。
aria-hidden=」true」是爲了防止被閱讀器直接把字符讀取出來，不是對全部的平臺都奏效。

<a href=」javascript:;」><span aria-hidden=」true」 data-icon=」!」></span>贊</a>

結合一些搭配使用的CSS屬性，能夠寫成以下代碼

[data-icon]:before {font-family: ‘ your-incofont-name'; content: attr(data-icon);speak:none;}

製做自已圖標字體

以上是免費圖標字體使用的幾種方法，下面看看如何製做屬於本身的圖標字體。

一、首先須要有建立矢量圖標的軟件，而且可以輸出SVG格式，好比「Illustrator」或者「Inkscape」。也能夠用 Photoshop的路徑工具畫出所須要的圖標，而後導出路徑到Illustrator裏去填色。 下圖爲Adobe Illustrator軟件。

注意必定是封閉的路徑，不能是單路徑描邊，若是是單路徑的話生成字體圖標後會顯示不出來。兩個以上的圖形要合併、圖形盡減小節點使用。以下圖，中間的圖(嘴巴部分)爲單路徑描邊（不封閉）,導入圖標生成器後會如右圖所示，嘴巴部分顯示不出來。

二、圖標製做完成後，選擇 「文件」菜單中「保存」，把文件保存成「SVG」格式。使用默認的SVG設置。
三、把SVG格式的圖標導入到icomoon、fontello、iconfont字體生成器中，去生成所要的圖標字體，如下介紹一下幾種字體生成器的用法：
（1）圖標字體生成器http://icomoon.io/app/
IcoMoon！一個能夠經過個性化設置來建立自定義圖標（字體）的生成器！IcoMoon是一項免費的服務，經過使用不一樣設置使咱們可以建立自定義的Icon圖或Icon字體。除了自定義Icon外，IcoMoon也有本身免費的海量圖標集，都很是贊。
打開地址，點擊Start the App按鈕。

點擊Import Icons按鈕導入SVG圖標，導入後對圖標進行相關的操做，如選中、刪除、移動、編輯等。

編輯完成後，就能夠進行下載了，它提供兩種下載方式：圖片版和字體版！圖片版是通過CSS Sprites技術處理的PNG格式，字體版有多種格式供咱們選擇（EOT,SVG,WOFF,TTF）。

若是要兼容IE7如下瀏覽器，請在設置裏勾選Support IE7(and older)選項，會生成一個單獨JS、CSS文件。

下載ZIP包後，解壓後會獲得以下圖的文件。將fonts文件夾複製到你的網站，爲項目添加字體。
從style.css文件中複製CSS樣式，並粘貼到你網站的CSS文件中，也能夠單獨存成一個樣式文件。

複製完成後，在CSS文件中找到@font-face，將URL路徑修改爲你本地的相對路徑。

字體和路徑都設置完成後，在HTML頁面只需調用相對應的class就能夠了。若是想兼容IE7瀏覽器，需引用IE7目錄的js。如：

調用class：<span class=」icon icon-add」></span>
調用js：<script src=」ie7/ie7.js」></script>

（2）圖標字體生成器http://fontello.com/

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

（3）ISUX矢量字體圖標庫http://font.isux.us/

ISUX矢量字體庫目前提供了豐富的字體圖標，能夠供下載使用，暫時還不支持自定義圖標的導入，期待不久的未來它的功能會愈來愈完善。你們有什麼好的建議和想法能夠聯繫他們。

經過以上幾種生成器的生成圖標字體，加上用CSS對其大小、顏色、透明度、陰影、Transition各類變換等控制，不只能夠縮放自如，製做出各 種特殊效果，並且還很容易維護，能夠經過多種不一樣的途徑對它們進行操做。相信你們已經體驗到他的強大之處，知足平常工做須要應該已經足夠了。雖然有這麼多 優勢，但圖標字體並非完美的，也存在些缺點。如：只能被渲染成單色的問題、屏幕閱讀器(雖然有解決方法，但並不完善)的問題、性能問題等等， 等待着咱們去發現和解決。相信將來會有更好的解決方案，好比：SVG（可伸縮矢量圖形），將來可能取代位圖的圖形技術等。
立足如今，放眼將來。最後對目前的圖標字體生成器工具作一下展望吧！
■ 可以支持導入更多的自定義格式，如EPS、AI等格式。
■ 可以引入項目管理的機制， 在同一賬號能夠同時管理多個項目圖標。
■ 提供更多免費、豐富的圖標字體供下載使用。

FAQ

一、跨域問題：
（1）經過配置本身的服務器。
# 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）放在同一個域下。
（3）使用base64置入CSS中(Icomoon在導出圖標時，設置裏勾選Encode & Embed Font in CSS選項)。
二、字體圖標出現鋸齒的問題：
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
三、@font-face與性能：
關於@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 文章內的建議和總結: （1）只在你肯定你很是須要 @font-face的時候才使用它; （2）將你的@font-face定義在全部的script標籤前; （3）若是你有許多字體文件，考慮將它們分散到幾個域名下; （4）不要包含沒有使用的 @font-face聲明——IE將不分它使用與否，統統加載; （5）Gzip字體文件，同時給它們一個將來的過時頭部聲明; （6）考慮字體文件的後加載，起碼對於IE。