深入淺出fonticon字體圖標

作為一名前端開發工程師，常常需要將圖標展現到頁面上，一種常見的方式是使用圖片，但是圖片有一些不足之處，比如載入速度較慢、難以修改顏色等等。那麼如何解決這些問題呢？這就需要用到fonticon字體圖標。

一、fonticon的概述

fonticon字體圖標是指將圖標素材打包成字體，通過CSS設置字體樣式來展示出不同的圖標。與圖片相比，它有以下優點：

1. 載入速度快，只需要請求一次字體文件即可。
2. 支持修改顏色、大小、樣式等樣式屬性，方便與頁面整體風格相協調。
3. 清晰度高，解決了在高清設備下圖片模糊的問題。

fonticon的建立需要應用程序或者網站的需求，將圖標素材定製化成一種可以嵌入在網頁等HTML文檔中的字體數據（.ttf, .woff, .eot等），同時將每一個字體數據對應一個 Unicode字元。然後通過設置內聯CSS樣式，將指定的Unicode字元映射為對應的字體樣式（即圖標）。

二、使用fonticon

1、引入字體文件

@font-face {
    font-family: 'my-iconfont'; /*定義字體名*/
    src: url('my-iconfont.eot'); /*定義eot字體文件路徑*/
    src: url('my-iconfont.eot?#iefix') format('embedded-opentype'), /*針對ie瀏覽器*/
         url('my-iconfont.woff') format('woff'), 
         url('my-iconfont.ttf') format('truetype'), 
         url('my-iconfont.svg#iconfont') format('svg');
}

以上代碼片段是定義fonticon字體庫，其中的font-family定義了字體名稱，也是後面引用字體時所用的名稱。src定義了字體文件所在路徑，分別對應eot、woff、ttf和svg字體文件，優先使用指定格式，若不支持就使用下一格式。最後使用SVG格式做為備選方案。

2、定義字體圖標

.iconfont {
    font-family:"my-iconfont" !important; /*使用定義的字體*/
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-camera:before { content: "\e60c"; } /*使用 Unicode字元對應的css樣式顯示對應字體*/

這裡.iconfont定義了使用的字體樣式，同時通過content設置了對應字體字元的Unicode值，如上述代碼表示圖標的Unicode編碼為\e60c，可以替換成其他字體對應字元的編碼。

3、應用字體圖標

最後一步就是在HTML標籤中應用剛剛定義的字體樣式，可以使用<i>或者<span>標籤，然後加入字體樣式和對應的字元編碼，其中字體樣式名為iconfont，而前面定義的圖標樣式名為icon-camera。這樣就可以在頁面中顯示出相應的圖標了。

三、fonticon的使用技巧

1、圖標大小

通過設置font-size可以改變字體圖標的大小，同時通過CSS3的transform屬性也可以進行縮放。

.iconfont {
    /*更改font-size大小*/
    font-size: 24px;
    /*縮放圖標大小*/
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
}

2、圖標顏色

字體圖標顏色的修改與文本顏色修改完全一樣，可以使用color屬性直接設置。此外還可以使用CSS3的text-shadow屬性，通過設置同樣的顏色，實現陰影效果，達到立體感。

.iconfont {
    /*修改顏色*/
    color: #333;
    /*立體效果*/
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
}

3、hover交互

可以通過偽類:hover，為字體圖標添加滑鼠懸浮效果，使其體驗更加炫酷。

.iconfont:hover {
    /*更改字體圖標顏色*/
    color: #ff6600;
    /*使字體圖標放大*/
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
}

4、多行文字中的fonticon

在多行文字中，fonticon的大小往往受到行高的影響，為了讓字體圖標垂直居中，需要設置合理的line-height和vertical-align屬性。

.iconfont {
    /*設置字體圖標垂直居中*/
    line-height: 1;
    vertical-align: middle;
}

四、fonticon的兼容性

fonticon在兼容性上，現代瀏覽器完全支持，但是ie8及以下版本不支持CSS中使用content屬性（解決方法：使用引入字體方式的fonticon）；而且有些字體，比如阿里巴巴的iconfont是採用SVG格式做為多彩字體，可能在部分低版本瀏覽器中出現不兼容問題。

五、結語

通過以上介紹，相信大家對fonticon字體圖標已經有了比較清晰的了解。它不僅可以使頁面載入更快、更炫酷，還可以方便進行樣式修改。因此，fonticon字體圖標已成為現代網站設計的必備技術之一，相信在不久的將來，它將更廣泛地應用於各類網站和應用程序中。