Font Awesome------設計原理分析

Font Awesome

http://www.bootcss.com/p/font-awesome/

不知道什么時候起，人們探索發現，CSS 嵌入字體不僅可以用來豐富 web 字體的表現，更可以用來實現 icons。原理是很簡單的，自定義一種字體，給不同的字配置作為 icon 的圖案，然后通過 CSS 嵌入其中使用。使用它可以輕松地解決上面所遇到的問題，因為一旦將 icons 當作普通 text 來處理，font-size，color 之類的文本修飾隨手解決，有了 CSS3 的支持，加個 text-shadow，旋轉幾下是相當輕松的。

以下文章原創為知更鳥，以此引用只為交流學習。

在這里向各位看官推薦下。Font-Awesome，這個項目主要是css3的一個應用，准確的說是一段css，這里的把很多圖標的東西做到了font文件里面，然后通過引用外部font文件的方式，來展現圖標。看看效果 猛擊這里到Font-Awesome

    那么看過以后大家有些疑惑，前端的同學可能會打開console看看具體的css代碼，卻沒有發現任何的圖片引用.其實大家可以在官方下載整個Font-Awesome項目，到目錄的font下面，那個里面有很多font文件，那么，有興趣的同學可以用font編輯軟件打開看看font文件里面的內容，我想大概就明白了，我這里就截圖吧。具體font軟件有很多，我用的是FontLab Studio 5.

下面我有了font文件的內容，我們來看看怎么用font文件把圖標顯示出來，首先使用的是@font-face屬性，來引用外部font文件。

1. @font-face {

2. font-family:<YourWebFontName>;

3. src:<source>[<format>]

4. [,<source>[<format>]]*;

5. [font-weight:<weight>];

6. [font-style:<style>];

7. }

取值說明

1、YourWebFontName:此值指的就是你自定義的字體名稱，最好是使用你下載的默認字體，他將被引用到你的Web元素中的font-family。如“font-family:”YourWebFontName”;”

2、source:此值指的是你自定義的字體的存放路徑，可以是相對路徑也可以是絕路徑；

3、format：此值指的是你自定義的字體的格式，主要用來幫助瀏覽器識別，其值主要有以下幾種類型：truetype,opentype,truetype-aat,embedded-opentype,avg等；

4、weight和style:這兩個值大家一定很熟悉，weight定義字體是否為粗體，style主要定義字體樣式，如斜體。

看看Font-Awesome里面的用法

1. @font-face {

2. font-family:'FontAwesome';

3. src:url('../font/fontawesome-webfont.eot');

4. src:url('../font/fontawesome-webfont.eot?#iefix')format('embedded-opentype'),

5. url('../font/fontawesome-webfont.woff')format('woff'),

6. url('../font/fontawesome-webfont.ttf')format('truetype'),

7. url('../font/fontawesome-webfont.svgz#FontAwesomeRegular')format('svg'),

8. url('../font/fontawesome-webfont.svg#FontAwesomeRegular')format('svg');

9. font-weight:normal;

10. font-style:normal;

11. }

可能大家有疑問了，那么這個屬性各瀏覽器的支持情況，還有就是萬惡的ie6是否可以支持。我也查了，神奇的是@font-face這個屬性早在ie6之前的版本就已經兼容了。我了個去~~。其它瀏覽器就不用說了，最新版本的FF，chrome，safari都支持的很好。不過字體文件的支持跟瀏覽器還是有關系的。對於各種后綴的font文件，我從別人的blog那copy了一段文字，給大家看看。
一、TureTpe(.ttf)格式：

.ttf字體是Windows和Mac的最常見的字體，是一種RAW格式，因此他不為網站優化,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；

二、OpenType(.otf)格式：

.otf字體被認為是一種原始的字體格式，其內置在TureType的基礎上，所以也提供了更多的功能,支持這種字體的瀏覽器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；

三、Web Open Font Format(.woff)格式：

.woff字體是Web字體中最佳格式，他是一個開放的TrueType/OpenType的壓縮版本，同時也支持元數據包的分離,支持這種字體的瀏覽器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；

四、Embedded Open Type(.eot)格式：

.eot字體是IE專用字體，可以從TrueType創建此格式字體,支持這種字體的瀏覽器有【IE4+】；

五、SVG(.svg)格式：

.svg字體是基於SVG字體渲染的一種格式,支持這種字體的瀏覽器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

這就意味着在@font-face中我們至少需要.woff,.eot兩種格式字體，甚至還需要.svg等字體達到更多種瀏覽版本的支持。

為了使@font-face達到更多的瀏覽器支持，Paul Irish寫了一個獨特的@font-face語法叫Bulletproof @font-face:

1. @font-face {

2. font-family:'YourWebFontName';

3. src:url('YourWebFontName.eot?')format('eot');/*IE*/

4. src:url('YourWebFontName.woff')format('woff'),

5. url('YourWebFontName.ttf')format('truetype');/*non-IE*/

6. }

但為了讓各多的瀏覽器支持，你也可以寫成：

1. @font-face {

2. font-family:'YourWebFontName';

3. src:url('YourWebFontName.eot');/* IE9 Compat Modes */

4. src:url('YourWebFontName.eot?#iefix')format('embedded-opentype'),/* IE6-IE8 */

5. url('YourWebFontName.woff')format('woff'),/* Modern Browsers */

6. url('YourWebFontName.ttf')format('truetype'),/* Safari, Android, iOS */

7. url('YourWebFontName.svg#YourWebFontName')format('svg');/* Legacy iOS */

8. }

看到這里，各位再回去看看Font-Awesome里面的寫法，是不是就看懂了很多了呢。至於有不明白的同學，可以去google下，上面有很多相關資料。

既然我要使用里面的圖標，那么多圖標，怎么調用呢，這個是個大問題，樣式名稱就一個，怎么區分圖標呢，各位不是看到我截的圖了嗎，就是font文件那張，里面看到圖標的上面不是有16進制的序號嗎。哦了，就是它，用圖標上頭的那個序號來找這個圖標，來看看Font-Awesome里面某個樣式的css定義

1. .icon-glass::before {

2. content:"f000";

3. }

4. [class^="icon-"]::before,[class*=" icon-"]::before {

5. font-family:FontAwesome;

6. font-weight:normal;

7. font-style:normal;

8. display:inline-block;

9. text-decoration:inherit;

10. }

如果前端看不懂那就不能原諒啦。至於其它同學，稍微解釋下：[class^="icon-"]這個是選擇匹配，就是icon開頭的class，都應用這個樣式。后面也一樣，如果想深入了解，去w3c school那里有很多資料。關鍵是下面，icon-glass，看到了嗎，content:后面，那個就是16進制的序號啦，有興趣可以去Font-Awesome主頁上面用console打開，改改里面的內容看看就明白了。關鍵是操作。至於上面其它的css大家可以慢慢看看的。

至於這么做有什么好處，不言而預。比較方便的管理圖標文件，還有就是使用font來控制比使用background那引用簡單便捷易於控制，而且對於很多不同瀏覽器對位置的計算不是一樣的，那么有時候大家會發現，icon在不同的瀏覽器中表現的不是一樣的，尤其是繁瑣的定位。而且對於不同版本的瀏覽器引入的圖片文件還不盡相同。這里又要說到萬惡的ie6了，對於png圖片，ie6下使用png8，解析度就要差很多。當然了ie6下也不支持以上寫法，因為對於css3的支持還要從ie9開始才有很好的效果。只是一種解決的思路。