WebFont與頁面ICON圖標(biāo)研究

當(dāng)你打開（絕大部分）網(wǎng)站，頁面上將會有許多形形色色的小圖標(biāo)（icon），適當(dāng)?shù)膇con的可以達(dá)到一圖勝千言的目的，使網(wǎng)頁的表現(xiàn)效果更佳。

關(guān)于頁面icon的制作，比較傳統(tǒng)的方法是，讓設(shè)計(jì)師去設(shè)計(jì)一個個的小圖片，然后網(wǎng)頁程式員再將設(shè)計(jì)好的icon放到頁面上適當(dāng)?shù)奈恢?。不過，隨著這些年Web前端技術(shù)的迅猛發(fā)展，現(xiàn)在有一種新的方案去制作頁面icon，那就是webfont。

本文將較為詳細(xì)的介紹頁面icon及webfont的方方面面。

頁面icon

什么是頁面icon

如下圖所示，

天貓商城中左側(cè)的導(dǎo)航欄中，每一個購物頻道都有一個小小的圖標(biāo)，這些小圖標(biāo)就是頁面icon的一種表現(xiàn)方式。

除此之外，頁面icon還有多種表現(xiàn)形式，可能出現(xiàn)在頁面的任何位置。

傳統(tǒng)icon的制作

我們再來看看百度域下的資源文件，其中有一個圖片文件，如下圖，

從圖中可以看出來，這個圖片中有很多的小圖標(biāo)，這些小圖標(biāo)按照一定的順序排列在一起。

上面這種方式就是我們所說的傳統(tǒng)制作和使用icon的方法。

首先要求設(shè)計(jì)師設(shè)計(jì)好大小合適的小圖標(biāo)，然后將這些小圖標(biāo)按照一定的順序和方式合并在一起（這種方式稱為css sprite，或者圖片精靈），然后網(wǎng)頁程序員通過書寫css代碼來控制相應(yīng)元素的background-position屬性，以達(dá)到不同元素顯示不同的小圖標(biāo)。

這種方式下，需要使用小圖標(biāo)的頁面元素的css規(guī)則一般這樣定制：一個表示圖標(biāo)類的icon樣式，以及表達(dá)不同小圖標(biāo)的自定義類名，比如icon-home，icon-user。當(dāng)然，具體css類名的命名規(guī)范是不定的。一般地，icon和icon-*的樣式內(nèi)容如下，

.icon {
    background-image: url(...)
}
.icon-home {
    background-position: 0 0;
}
.icon-user {
    background-position: 0 10px;
}

這種制作和使用icon的方式現(xiàn)在仍然有許多企業(yè)和網(wǎng)頁正在使用，也是一種比較常規(guī)的方式。這種方式在書寫css代碼需要有一定的耐心，要匹配好各個icon的background-position屬性。

值得一提的是，這種方式有一個不可避免弊端，就是，可能頁面的icon需要兩種以上的尺寸或者icon要發(fā)生變更。前者一般會要求設(shè)計(jì)師產(chǎn)出多套的icon，因?yàn)橹苯訉D片進(jìn)行縮放在網(wǎng)頁上的表現(xiàn)并不是很好；后者可能就要重寫之前的css代碼了，因?yàn)榭赡軋D片雪碧后的position也發(fā)生了變化。

webfont與@font-face

什么是webfont

隨著這些年Web前端技術(shù)的迅猛發(fā)展，web font技術(shù)逐漸成熟。那么什么是web font呢？

web font，又稱之為在線字體或者網(wǎng)絡(luò)字體，是CSS3中的一個模塊，主要是把自定義的特殊字體嵌入到網(wǎng)頁中。無需安裝，無需下載，直接在線使用。

@font-face語法

web font技術(shù)需要通過CSS的@font-face語句引入在線字體。所以這里我先說一下@font-face的相關(guān)內(nèi)容。

@font-css是CSS3中的一個模塊，通過它可以將自定義的字體嵌入到前端網(wǎng)頁中。隨著@font-face的出現(xiàn)，標(biāo)識著我們在web開發(fā)的過程中可以使用除了web安全字體之外的自定義字體，使頁面的展現(xiàn)更加多樣化。

值得一提的是，@font-face這個CSS3模塊早在IE4中就已經(jīng)被支持了。有點(diǎn)意外。

我們先來看看@font-face的語法，

@font-face {
    font-family: <your-webfont-name>;
    src: <source> <format> [, <source> <format>];
    [font-weight: <weight>;]
    [font-style: <style>;]
}

值得注意的有兩點(diǎn)，一個是font-family屬性，一個是src屬性。前者是自定義webfont的名字，后者是引用字體的路徑。其中src中<format>字段是用來標(biāo)識字體格式幫助瀏覽器識別。常見字體格式及format如下圖，

format說明，

而瀏覽器對各字體格式的支持如下，

說了這么多的理論，下面讓我們來一段具體的CSS代碼，了解下這個@font-face到底是如何定義的。

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?'); /* 兼容IE9以上 */
    src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), /*兼容IE8以下*/
        url('fonts/icomoon.woff') format('woff'),
        url('fonts/icomoon.ttf') format('truetype'),
        url('fonts/icomoon.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

這樣我們自定義的web font就成功了。然后就可以在頁面中正常使用了。比如，

div.title {
    font-family: 'icomoon'
}

如果不出任何的意外的話，你將會得到自定義的字體效果。

自定義字體

說到這里，如果大家自己動手實(shí)驗(yàn)一番的話，就會發(fā)現(xiàn)一個致命問題：我去哪里獲得這些自定義字體??？

目前有三種途徑來獲取這些字體，

• 去免費(fèi)的網(wǎng)站下載字體
• 去收費(fèi)的網(wǎng)站購買字體使用授權(quán)
• 有設(shè)計(jì)背景，自己設(shè)計(jì)字體

針對前兩種方式?jīng)]什么好說的，針對第三種方案，可能相關(guān)門檻就高了一點(diǎn)，需要一些設(shè)計(jì)背景。如果有興趣，可以參閱這篇文章。

字體圖標(biāo)

使用現(xiàn)有的免費(fèi)字體圖標(biāo)

有一個好用的html5應(yīng)用。通過此應(yīng)用你可以選擇IcoMoon提供的免費(fèi)或者購買收費(fèi)圖標(biāo)，然后生成字體。如下圖所示，

下載得到生成好的字體后，它會幫我們生成好css代碼，如下，

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?-rah7ee');
    src:url('fonts/icomoon.eot?#iefix-rah7ee') format('embedded-opentype'),
        url('fonts/icomoon.woff?-rah7ee') format('woff'),
        url('fonts/icomoon.ttf?-rah7ee') format('truetype'),
        url('fonts/icomoon.svg?-rah7ee#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
.icon {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-home3:before {
    content: "\e600";
}
.icon-office:before {
    content: "\e601";
}
.icon-newspaper:before {
    content: "\e602";
}
.icon-pencil:before {
    content: "\e603";
}

ok，事已至此，我們已經(jīng)得到了需要的字體、css代碼?，F(xiàn)在我們可以在html頁面使用圖標(biāo)字體來制作頁面小icon了。

這里我們有兩種方式來使用圖標(biāo)字體，一種是html實(shí)體 + webfont，一種是css樣式 + webfont。

html實(shí)體+webfont

還記得文首提到的天貓首頁中的小icon圖標(biāo)么？現(xiàn)在我再來看看它的源代碼，

<li>
    <s class="menu-nav-icon fp-iconfont">&#x 3451;</s>
</li>
<li>
    <s class="menu-nav-icon fp-iconfont">&#x 3459;</s>
</li>
<li>
    <s class="menu-nav-icon fp-iconfont">&#x 346c;</s>
</li>

.fp-iconfont {
    font-family: tm-fp-font !important;
}

這里我們只截取了一部分html代碼，并去除了多余的樣式因素。

從上述的代碼中，我們看到s標(biāo)簽中包括了一些十六進(jìn)制字符（以&#x開始，我這里強(qiáng)制添加了一個空格，不然實(shí)體就被瀏覽器解析了），這些奇怪的字符的作用就是配合自定義font-family進(jìn)行頁面渲染，從而展現(xiàn)為一個個icon小圖標(biāo)。

回頭看看我們之前從https://icomoon.io/app上下載自定義字體時(shí)，是不是也給每一個icon圖標(biāo)標(biāo)識了一個html實(shí)體（e600、e601等等）？

css樣式+webfont

我們除了使用html實(shí)體配合font之外，還可以使用css樣式配合font。

在https://icomoon.io/app上下載自定義圖標(biāo)字體時(shí)，會同時(shí)得到相關(guān)的css代碼，如下，

.icon {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-home3:before {
    content: "\e600";
}
.icon-office:before {
    content: "\e601";
}
.icon-newspaper:before {
    content: "\e602";
}
.icon-pencil:before {
    content: "\e603";
}

所以我們只要在需要圖標(biāo)的html代碼中添加相應(yīng)的css樣式即可，比如，

.icon {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-home3:before {
    content: "\e600";
}
.icon-office:before {
    content: "\e601";
}
.icon-newspaper:before {
    content: "\e602";
}
.icon-pencil:before {
    content: "\e603";
}

可見，這種方式不再需要在html代碼中書寫相應(yīng)的html實(shí)體，因?yàn)槲覀兘o相關(guān)元素添加了偽元素，將html實(shí)體轉(zhuǎn)移到了偽元素中。

這里額外提一點(diǎn)，為何天貓的html頁面中使用的是html實(shí)體+font而不是css樣式+font？這其實(shí)是考慮了低版本瀏覽器的兼容性。因?yàn)椴糠郑ǖ桶姹镜模g覽器還不支持css偽元素，但是html實(shí)體一定是支持的。

對比

到現(xiàn)在為止，我們已經(jīng)有了2種（嚴(yán)格來說，是3種）來制作和使用網(wǎng)頁icon小圖標(biāo)，

• 圖片 + css sprite
• webfont + html實(shí)體
• webfont + css樣式

三者的對比如下圖，

總得來說，前者是操作圖片，后兩者操作icon小圖標(biāo)就跟操作字體是一樣的。比如，我想縮放圖標(biāo)，直接修改font-size即可；我想修改顏色，直接修改color即可。除了這些簡單的變化，還可以靈活的添加描邊、陰影等。

不過webfont的圖標(biāo)色彩單一（最多也就只能做出漸變），而圖片則色彩豐富。

webfont的更多內(nèi)容

Font Awesome

Font Awesome（中文站點(diǎn)）是一套為Bootstrap而創(chuàng)造的圖標(biāo)字體庫及CSS框架，在業(yè)界享有盛譽(yù)。

FA包含了常規(guī)web開發(fā)所需要用到的幾乎所有圖標(biāo)，并且免費(fèi)授權(quán)使用，只需要下載即可。詳情請參閱其官網(wǎng)。

中文WebFont

目前在國外，webfont已經(jīng)非常流行，但是國內(nèi)遲遲未能起步。這跟國內(nèi)的環(huán)境有關(guān)系，

• 中文字體庫過于龐大，需要一定帶寬支持
• 國內(nèi)低版本瀏覽器市場占有率不能忽視，但是低版本的瀏覽器不能良好的支持webfont

不過，目前國內(nèi)已經(jīng)有兩家公司致力于webfont這一塊的服務(wù)，

• http://www.youziku.com/
• http://cn.justfont.com/

有翻墻資源的，可以參閱google推出的webfont云托管服務(wù)。有興趣的同學(xué)請自行調(diào)研相關(guān)服務(wù)。

中文webfont壓縮

字蛛（Font-Spider）是一款基于nodejs的開源的本地webfont壓縮器。它的原理就是掃描頁面文檔，然后刪除webfont中沒有使用的字符，從而達(dá)到精簡webfont體積的目的。有興趣的同學(xué)可以參閱其官網(wǎng)。

參考列表

• CSS3 @font-face
• 遲到的中文 WebFont
• 用字體在網(wǎng)頁中畫ICON圖標(biāo)

End. All rights reserved @gejiawen.