圖標字體化淺談
圖標字體化淺談-移動閱讀二維碼

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

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

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

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

3、兼容性:網頁字體支持所有現代瀏覽器,包括IE低版本。詳細兼容性可以點擊這里。

除了以上優勢之外,當然也有劣勢
1、圖標字體只能被渲染成單色或者CSS3的漸變色,由于此限制使得它不能廣泛使用。
2、使用版權上有限制,有好多字體是收費的。當然也有很多免費開源的精美字體圖標供下載使用。
3、創作自已的字體圖標很費時間,重構人員后期維護的成本偏高。

如何獲取圖標字體及使用

要想獲取圖標字體,不外乎兩種途徑,其一找到付費網站購買,其二就是到免費網站下載,提供免費下載網站很多,神飛曾經發表過一篇博客icon font大搜羅,上面羅列好多的免費網站的地址,大家有興趣可以去下載。如何使用呢?一般來說,有3種方法:
1、把字符直接寫在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 ‘;}

2、使用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”; }

3、用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;}

制作自已圖標字體

以上是免費圖標字體使用的幾種方法,下面看看如何制作屬于自己的圖標字體。

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

注意一定是封閉的路徑,不能是單路徑描邊,如果是單路徑的話生成字體圖標后會顯示不出來。兩個以上的圖形要合并、圖形盡減少節點使用。如下圖,中間的圖(嘴巴部分)為單路徑描邊(不封閉),導入圖標生成器后會如右圖所示,嘴巴部分顯示不出來。

2、圖標制作完成后,選擇 “文件”菜單中“保存”,把文件保存成“SVG”格式。使用默認的SVG設置。
3、把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、跨域問題:
(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選項)。
2、字體圖標出現鋸齒的問題:
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
3、@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。

參考文章:
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

本文鏈接:http://www.casaleticia.com/about-icon-font.html
本文標簽: , ,