css中Font字型小表徵圖應用

我們知道在頁面上傳入小表徵圖有多種方式，比如我們使用比較多的是css sprite背景圖片定位，就是將很多小表徵圖整合到一張大圖，然後使用CSS定位背景。還有一種比較現代的方式是使用font字型表徵圖，它利用@font-face原理載入表徵圖字型庫，然後調用表徵圖。

使用css sprite方式非常方便，可以有很多色彩繽紛的表徵圖，而且相容性好，但是缺點就是表徵圖不能縮放，或者說縮放了會失真，另外維護也不方便，修改一個表徵圖要對整張大圖就行修改，並且定位像素需要藉助PS等工具確定位置。而使用表徵圖字型庫越來越受開發人員青睞，它的維護簡單，而且對表徵圖縮放自由，隨時都可以展示高清的表徵圖，可以添加陰影製作效果和動畫效果，設定也非常方便，唯一差點的就是表徵圖顏色比較單一，就是設定的時候只能設定一個表徵圖為單一顏色。下面我們來看下如何使用font字型小表徵圖。
HTML

目前市面上有很多字型表徵圖庫，有收費的也有免費使用的。常見的有icomoon，Font-Awesome 以及 Glyphicon Halflings，Glyphicon在bootstrap下使用時免費的。當然國內阿里系也開放了自己的表徵圖庫。
本文講解下使用icomoon字型庫，我們可以在官網上選擇喜歡的字型表徵圖然後下載並部署到項目中，當然也可以自己製作表徵圖然後上傳到官網上。下載好的字型庫，在一個fonts/的檔案夾裡。我們先布置好html結構：

<ul class="icons">
    <li class="sp"><i class="icon-spades spades"></i> 黑桃K</li>
    <li class="red"><i class="icon-file-picture"></i> 照片</li>
    <li><i class="icon-tablet"></i> iPad</li>
    <li><a href="#"><i class="icon-bubbles"></i> 評論</a></li>
</ul>

我們在上面的html代碼中，給元素li裡添加了<i>，然後加上class屬性，class值就對應了css檔案裡的字型表徵圖樣式了。
CSS

首先我們使用@font-face命名字型名稱，以及載入的字型檔，需要載入多個字型檔以相容各瀏覽器和系統。然後定義class含有icon的樣式，注意其中使用了消除鋸齒處理，就是圖片放大的時候不會出現邊緣鋸齒現象，然後使用偽類，設定content即表徵圖內容。

@font-face {
    font-family: 'icomoon';
    src:    url('../fonts/icomoon.eot?42vx6u'); /* IE9 相容模式 */
    src:    url('../fonts/icomoon.eot?42vx6u#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.ttf?42vx6u') format('truetype'),
        url('../fonts/icomoon.woff?42vx6u') format('woff'),
        url('../fonts/icomoon.svg?42vx6u#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
 
    /* 消除鋸齒處理 =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
 
.icon-spades:before {
    content: "\e900";
}
.icon-file-picture:before {
    content: "\e901";
}
.icon-tablet:before {
    content: "\e902";
}
.icon-bubbles:before {
    content: "\e903";
}

然後，我們運行下html頁面，是不是可以看到幾個表徵圖了，方便實用吧。
如果想給表徵圖定義動畫效果，可以使用css來實現。

.spinner{
    -webkit-animation: spinner 1s infinite linear;
    animation: spinner 1s infinite linear;
}
 
@-webkit-keyframes spinner{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

以上代碼定義了表徵圖旋轉動畫，我們可以結合js實現這樣的效果：當滑鼠滑上表徵圖時展示表徵圖旋轉動畫，當滑鼠離開時，停止旋轉動畫。這個效果的代碼大家可以參照demo中的源碼。demo中我還加上了Font Awesome字型表徵圖樣本和Glyphicons字型表徵圖樣本，大家可以查看demo或下載源碼瞭解。