WebFont與頁(yè)面ICON圖標(biāo)研究
當(dāng)你打開(kāi)（絕大部分）網(wǎng)站，頁(yè)面上將會(huì)有許多形形色色的小圖標(biāo)（icon），適當(dāng)?shù)膇con的可以達(dá)到一圖勝千言的目的，使網(wǎng)頁(yè)的表現(xiàn)效果更佳。
關(guān)于頁(yè)面icon的制作，比較傳統(tǒng)的方法是，讓設(shè)計(jì)師去設(shè)計(jì)一個(gè)個(gè)的小圖片，然后網(wǎng)頁(yè)程式員再將設(shè)計(jì)好的icon放到頁(yè)面上適當(dāng)?shù)奈恢?。不過(guò)，隨著這些年Web前端技術(shù)的迅猛發(fā)展，現(xiàn)在有一種新的方案去制作頁(yè)面icon，那就是webfont。
本文將較為詳細(xì)的介紹頁(yè)面icon及webfont的方方面面。
頁(yè)面icon
什么是頁(yè)面icon
如下圖所示，
天貓商城中左側(cè)的導(dǎo)航欄中，每一個(gè)購(gòu)物頻道都有一個(gè)小小的圖標(biāo)，這些小圖標(biāo)就是頁(yè)面icon的一種表現(xiàn)方式。
除此之外，頁(yè)面icon還有多種表現(xiàn)形式，可能出現(xiàn)在頁(yè)面的任何位置。
傳統(tǒng)icon的制作
我們?cè)賮?lái)看看百度域下的資源文件，其中有一個(gè)圖片文件，如下圖，
從圖中可以看出來(lái)，這個(gè)圖片中有很多的小圖標(biāo)，這些小圖標(biāo)按照一定的順序排列在一起。
上面這種方式就是我們所說(shuō)的傳統(tǒng)制作和使用icon的方法。
首先要求設(shè)計(jì)師設(shè)計(jì)好大小合適的小圖標(biāo)，然后將這些小圖標(biāo)按照一定的順序和方式合并在一起（這種方式稱為css sprite，或者圖片精靈），然后網(wǎng)頁(yè)程序員通過(guò)書寫css代碼來(lái)控制相應(yīng)元素的background-position屬性，以達(dá)到不同元素顯示不同的小圖標(biāo)。
這種方式下，需要使用小圖標(biāo)的頁(yè)面元素的css規(guī)則一般這樣定制：一個(gè)表示圖標(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)頁(yè)正在使用，也是一種比較常規(guī)的方式。這種方式在書寫css代碼需要有一定的耐心，要匹配好各個(gè)icon的background-position屬性。
值得一提的是，這種方式有一個(gè)不可避免弊端，就是，可能頁(yè)面的icon需要兩種以上的尺寸或者icon要發(fā)生變更。前者一般會(huì)要求設(shè)計(jì)師產(chǎn)出多套的icon，因?yàn)橹苯訉?duì)圖片進(jìn)行縮放在網(wǎng)頁(yè)上的表現(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中的一個(gè)模塊，主要是把自定義的特殊字體嵌入到網(wǎng)頁(yè)中。無(wú)需安裝，無(wú)需下載，直接在線使用。
@font-face語(yǔ)法
web font技術(shù)需要通過(guò)CSS的@font-face語(yǔ)句引入在線字體。所以這里我先說(shuō)一下@font-face的相關(guān)內(nèi)容。
@font-css是CSS3中的一個(gè)模塊，通過(guò)它可以將自定義的字體嵌入到前端網(wǎng)頁(yè)中。隨著@font-face的出現(xiàn)，標(biāo)識(shí)著我們?cè)趙eb開(kāi)發(fā)的過(guò)程中可以使用除了web安全字體之外的自定義字體，使頁(yè)面的展現(xiàn)更加多樣化。
值得一提的是，@font-face這個(gè)CSS3模塊早在IE4中就已經(jīng)被支持了。有點(diǎn)意外。
我們先來(lái)看看@font-face的語(yǔ)法，
@font-face {
font-family: <your-webfont-name>;
src: <source> <format> [, <source> <format>];
[font-weight: <weight>;]
[font-style: <style>;]
}值得注意的有兩點(diǎn)，一個(gè)是font-family屬性，一個(gè)是src屬性。前者是自定義webfont的名字，后者是引用字體的路徑。其中src中<format>字段是用來(lái)標(biāo)識(shí)字體格式幫助瀏覽器識(shí)別。常見(jiàn)字體格式及format如下圖，
format說(shuō)明，
而瀏覽器對(duì)各字體格式的支持如下，
說(shuō)了這么多的理論，下面讓我們來(lái)一段具體的CSS代碼，了解下這個(gè)@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就成功了。然后就可以在頁(yè)面中正常使用了。比如，
div.title {
font-family: 'icomoon'
}如果不出任何的意外的話，你將會(huì)得到自定義的字體效果。
自定義字體
說(shuō)到這里，如果大家自己動(dòng)手實(shí)驗(yàn)一番的話，就會(huì)發(fā)現(xiàn)一個(gè)致命問(wèn)題：我去哪里獲得這些自定義字體??？
目前有三種途徑來(lái)獲取這些字體，
- 去免費(fèi)的網(wǎng)站下載字體
- 去收費(fèi)的網(wǎng)站購(gòu)買字體使用授權(quán)
- 有設(shè)計(jì)背景，自己設(shè)計(jì)字體
針對(duì)前兩種方式?jīng)]什么好說(shuō)的，針對(duì)第三種方案，可能相關(guān)門檻就高了一點(diǎn)，需要一些設(shè)計(jì)背景。如果有興趣，可以參閱這篇文章。
字體圖標(biāo)
使用現(xiàn)有的免費(fèi)字體圖標(biāo)
有一個(gè)好用的html5應(yīng)用。通過(guò)此應(yīng)用你可以選擇IcoMoon提供的免費(fèi)或者購(gòu)買收費(fèi)圖標(biāo)，然后生成字體。如下圖所示，
下載得到生成好的字體后，它會(huì)幫我們生成好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頁(yè)面使用圖標(biāo)字體來(lái)制作頁(yè)面小icon了。
這里我們有兩種方式來(lái)使用圖標(biāo)字體，一種是html實(shí)體 + webfont，一種是css樣式 + webfont。
html實(shí)體+webfont
還記得文首提到的天貓首頁(yè)中的小icon圖標(biāo)么？現(xiàn)在我再來(lái)看看它的源代碼，
<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開(kāi)始，我這里強(qiáng)制添加了一個(gè)空格，不然實(shí)體就被瀏覽器解析了），這些奇怪的字符的作用就是配合自定義font-family進(jìn)行頁(yè)面渲染，從而展現(xiàn)為一個(gè)個(gè)icon小圖標(biāo)。
回頭看看我們之前從https://icomoon.io/app上下載自定義字體時(shí)，是不是也給每一個(gè)icon圖標(biāo)標(biāo)識(shí)了一個(gè)html實(shí)體（e600、e601等等）？
css樣式+webfont
我們除了使用html實(shí)體配合font之外，還可以使用css樣式配合font。
在https://icomoon.io/app上下載自定義圖標(biāo)字體時(shí)，會(huì)同時(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";
}可見(jiàn)，這種方式不再需要在html代碼中書寫相應(yīng)的html實(shí)體，因?yàn)槲覀兘o相關(guān)元素添加了偽元素，將html實(shí)體轉(zhuǎn)移到了偽元素中。
這里額外提一點(diǎn)，為何天貓的html頁(yè)面中使用的是html實(shí)體+font而不是css樣式+font？這其實(shí)是考慮了低版本瀏覽器的兼容性。因?yàn)椴糠郑ǖ桶姹镜模g覽器還不支持css偽元素，但是html實(shí)體一定是支持的。
對(duì)比
到現(xiàn)在為止，我們已經(jīng)有了2種（嚴(yán)格來(lái)說(shuō)，是3種）來(lái)制作和使用網(wǎng)頁(yè)icon小圖標(biāo)，
- 圖片 + css sprite
- webfont + html實(shí)體
- webfont + css樣式
三者的對(duì)比如下圖，
總得來(lái)說(shuō)，前者是操作圖片，后兩者操作icon小圖標(biāo)就跟操作字體是一樣的。比如，我想縮放圖標(biāo)，直接修改font-size即可；我想修改顏色，直接修改color即可。除了這些簡(jiǎn)單的變化，還可以靈活的添加描邊、陰影等。
不過(guò)webfont的圖標(biāo)色彩單一（最多也就只能做出漸變），而圖片則色彩豐富。
webfont的更多內(nèi)容
Font Awesome
Font Awesome（中文站點(diǎn)）是一套為Bootstrap而創(chuàng)造的圖標(biāo)字體庫(kù)及CSS框架，在業(yè)界享有盛譽(yù)。
FA包含了常規(guī)web開(kāi)發(fā)所需要用到的幾乎所有圖標(biāo)，并且免費(fèi)授權(quán)使用，只需要下載即可。詳情請(qǐng)參閱其官網(wǎng)。
中文WebFont
目前在國(guó)外，webfont已經(jīng)非常流行，但是國(guó)內(nèi)遲遲未能起步。這跟國(guó)內(nèi)的環(huán)境有關(guān)系，
- 中文字體庫(kù)過(guò)于龐大，需要一定帶寬支持
- 國(guó)內(nèi)低版本瀏覽器市場(chǎng)占有率不能忽視，但是低版本的瀏覽器不能良好的支持webfont
不過(guò)，目前國(guó)內(nèi)已經(jīng)有兩家公司致力于webfont這一塊的服務(wù)，
有翻墻資源的，可以參閱google推出的webfont云托管服務(wù)。有興趣的同學(xué)請(qǐng)自行調(diào)研相關(guān)服務(wù)。
中文webfont壓縮
字蛛（Font-Spider）是一款基于nodejs的開(kāi)源的本地webfont壓縮器。它的原理就是掃描頁(yè)面文檔，然后刪除webfont中沒(méi)有使用的字符，從而達(dá)到精簡(jiǎn)webfont體積的目的。有興趣的同學(xué)可以參閱其官網(wǎng)。
參考列表
End. All rights reserved @gejiawen.
更多建議：