本文由Spy根據(jù)Steven Bradley的《Why And How To Use Icon Fonts》所譯，整個(gè)譯文帶有我們自己的理解與思想，如果譯得不好或不對之處還請同行朋友指點(diǎn)。如需轉(zhuǎn)載此譯文，需注明英文出處：http://www.vanseodesign.com/web-design/icon-fonts/，以及作者相關(guān)信息

——作者：Steven Bradley

——譯者：Spy

圖片是有諸多優(yōu)點(diǎn)的，然而目前在網(wǎng)站設(shè)計(jì)這行業(yè)面臨各種各樣的挑戰(zhàn)。圖片不但增加了總文件的大小，還增加了很多額外的"http請求"，這都會大大降低網(wǎng)頁的性能的。圖片還有一個(gè)缺點(diǎn)就是不能很好的進(jìn)行“縮放”，因此，有時(shí)候在“響應(yīng)式設(shè)計(jì)”中需要使用圖像的最好解決方案就是不去使用圖片。

上一周我提出一個(gè)關(guān)于“在‘響應(yīng)式設(shè)計(jì)’中圖像處理的關(guān)鍵問題”的概述：尤其是如何為各種尺寸的設(shè)備提供相適應(yīng)的的圖片？而今天我會認(rèn)真考慮一下“字符圖標(biāo)”，并且我們可以在我們的網(wǎng)頁中使用“字符圖標(biāo)”來代替一些圖片，達(dá)到一樣的效果。

為什么要用和如何使用字體圖標(biāo)

字符圖標(biāo)的優(yōu)點(diǎn)

位圖圖片不能很好地進(jìn)行縮放，當(dāng)圖片進(jìn)行放大時(shí)會失真（即變模糊），當(dāng)圖片進(jìn)行縮小時(shí)就會浪費(fèi)掉像素。而且加載每一張圖片都需要一次“http請求”，因此也拖慢了整個(gè)加載頁面的時(shí)間。另外，要是沒有圖片編輯器（軟件）的話就很難對圖片進(jìn)行編輯、處理等操作。

字體就不會有以上這些問題，字體可以進(jìn)行隨意縮放并且每一個(gè)字符都不需要進(jìn)行額外的“http請求”。當(dāng)我們把字體當(dāng)成文字用來寫作的時(shí)候，往往沒有想到的是，它們只是一種形狀而已。如果把這些字體看成圖標(biāo)，將又將會產(chǎn)生是怎樣結(jié)果呢？

“‘字符圖標(biāo)’是非常美妙、神奇的”， Chris Coyier如是說。他制作關(guān)于“字符圖標(biāo)”的Demo頁面就列出6大理由，為什么“字符圖標(biāo)”是如此美妙與神奇？

  • 很容易任意地縮放；
  • 很容易地改變顏色；
  • 很容易地產(chǎn)生陰影；
  • 可以擁有透明效果；
  • 一般來說，有先進(jìn)的瀏覽器支持；
  • 可以使用CSS來裝飾（可以得到CSS很好支持）；
  • 可以快速轉(zhuǎn)化形態(tài)（做出一些變化，如 :hover等）；
  • 可以做出跟圖片一樣可以做的事情（改變透明度、旋轉(zhuǎn)度，等）；
  • 本身體積更小，但攜帶的信息并沒有削減。

讓我們來看位圖做的效果

為什么要用和如何使用字體圖標(biāo)

如何使用字符圖標(biāo)？

想要使用字符圖標(biāo)的第一步是去找到并且嵌入這些字體。我將會在文章的后面告訴你去一些地方尋到它們。當(dāng)你有了字體，你就可以使用字體方法來使用它。我推薦這文章Paul Irish寫的有關(guān)于@font-face語法。

有關(guān)于@font-face更多的中文教程，在W3cplus已有多篇教程，如果您對此非常感謝興趣，猛擊這里。 ——大漠

一般來說，這里有3種方法：

  • 把字符直接寫在html文件里；
  • 使用css來生成內(nèi)容；
  • 用data-icon屬性

把字符直接寫在html文件里

這個(gè)方法是簡單而且直觀的，見如下代碼，我用一個(gè)<span>元素去包含一個(gè)字符“s”(即是字母“s”)，然后給這個(gè)<span>添加一個(gè)類。這個(gè)字母在選定的字體中被映射到一個(gè)特定的圖標(biāo)。 

<a href="shopping-cart.php"><span class="icon">s</span> View Cart</a>

為了顯示效果，還需要編寫樣式類：.icon來決定此字符以哪種字體風(fēng)格來顯示，如下： 

.icon {font-family: 'your-chosen-icon-font';}

這是個(gè)簡單的例子，但是通常你用字母當(dāng)作為字符的時(shí)候，攜帶的信息量是較少的。字母是可以被屏幕閱讀器讀取到的，往往有時(shí)候你只是想僅作為圖片被看到而已，會有那么一群人（如視障人士）是需要聽內(nèi)容的。

為什么要用和如何使用字體圖標(biāo)

使用css來生成內(nèi)容

讓我們更深入點(diǎn)，不直接在html文件里添加字符，我們用css來生成字符內(nèi)容。見代碼如下： 

<a href="shopping-cart.php" class="icon cart"> View Cart</a>

可以看出，我添加了一個(gè)類名“cart”。神奇的就事就發(fā)生在css中，跟上面一樣，第一步先定義好字體,然后我們可以使用:before偽元素來產(chǎn)生字符圖標(biāo)，其中“before”表示字符出現(xiàn)在左邊，“after”則出現(xiàn)在右邊。 

.icon { font-family: 'your-chosen-icon-font';}  .cart:before {content: "s"; }

同樣是需要使用字母s來映射出圖標(biāo)，只不過區(qū)別是移除了HTML標(biāo)簽換用了CSS樣式實(shí)現(xiàn)。這是好事，但是，屏幕閱讀器還是會讀出字母的，這樣子也不是很好。

用“data-icon”屬性

一個(gè)跟上面相似方法就是使用html5的“data-”屬性，接下來我們就創(chuàng)建一個(gè)data-icon屬性。 

<a href="shopping-cart.php" class="icon" data-icon="s"> View Cart</a>

跟上面一樣，我們也將添加需要的字體font-family，然后我們通過使用data-icon來創(chuàng)建字母（字符），如： 

.icon {font-family: 'your-chosen-icon-font';} .icon:before {content: attr(data-icon);}

但是這些寫還是會出現(xiàn)跟上面一樣的問題，屏幕閱讀器還是會讀出字母的。

更好的 Data-Icon 方法

嘗試去優(yōu)化上面提到的Data-Icon方法，Chris Coyier就給出兩個(gè)方法，一種是用類似的圖標(biāo)代表某個(gè)字符；另外一種是就直接使用標(biāo)準(zhǔn)的圖標(biāo)圖片。

這里就展示第一種的做法，我們給當(dāng)前元素添加一個(gè)新的屬性：aria-hidden，并賦值為“true”。 

<a href="shopping-cart.php"><span aria-hidden="true" data-icon="s"></span>View Cart</a>

aria-hidden=”true”是為了防止被閱讀器直接把字符讀取出來，但是也不是對所有的平臺都奏效。

再結(jié)合一些搭配使用的css屬性，可以寫成如下代碼： 

[data-icon]:before {font-family: your-chosen-font; content: attr(data-icon);speak: none;}

最后一個(gè)speak: none，其實(shí)具體作用不是很可靠的，寫上這個(gè)只是為了以防萬一，能夠用上，就可以派上用場了。你還可以從Chris Coyier的一篇文章post describing both methods看到上面所有講到的例子，可以學(xué)習(xí)到更多。

為什么要用和如何使用字體圖標(biāo)

字符圖標(biāo)的缺點(diǎn)有哪些？

到目前為止，我們聽到的都是字符圖標(biāo)的好處和優(yōu)點(diǎn)。難道字符圖標(biāo)就沒有任何缺點(diǎn)嗎？那么，接下來正是要說說缺點(diǎn)，或者說不好之處。我們提過我們是不愿意讓屏幕閱讀器去讀出我們的字符圖標(biāo)了，那就提一下其它的。

  • 它們只能被渲染成單色或者css3的漸變色；
  • 你使用限制是很大的，除非你想花時(shí)間去創(chuàng)作你自己的字符圖標(biāo)；
  • 創(chuàng)作字符圖標(biāo)是很耗時(shí)間的。

第一條不是很大問題，因?yàn)槟銓⒉粫睦锒际褂盟鼈?，不過就是因?yàn)樽址麍D標(biāo)受顏色的限制這個(gè)根本性因素使得它不能廣泛使用。

最后兩條也不是很大問題，很多免費(fèi)、優(yōu)秀的字符圖標(biāo)不斷地增多，因此可以利用的這些資源也是不斷增多，所以不必要一定去原創(chuàng)屬于自己的字符圖標(biāo)。

從上面講的方法中，我們已經(jīng)知道主要有兩種方法來解決屏幕閱讀器的問題：在html的元素使用aria-hidden屬性和把內(nèi)容寫在CSS里面。還有一種可能更好的方式就是把圖標(biāo)映射到統(tǒng)一字符編碼標(biāo)準(zhǔn)的字母。很多很多還沒被編碼的代碼進(jìn)行映射性編碼可以當(dāng)作圖標(biāo)使用的話，也就不會被屏幕閱讀器讀出來了。

為什么要用和如何使用字體圖標(biāo)

哪里可以得到字符圖標(biāo)？

文章一開始就說會指導(dǎo)你去獲得字符圖標(biāo)，現(xiàn)在就開始講解。下面列出一系列的鏈接，但我也相信不只只有這么一些鏈接可以得到你滿意的字符圖標(biāo)，而且將來會有更多的人去創(chuàng)造更多的圖標(biāo)。

如果你是個(gè)才華橫溢，有能力去創(chuàng)建自己的字符圖標(biāo)的人，我肯定下面列出的工具網(wǎng)站會對你很有幫助的。

總結(jié)

字符圖標(biāo)并不是適合所有的場合，但是在某扮演圖標(biāo)這方面的確很優(yōu)秀、突出。甚至有比圖片更多的優(yōu)點(diǎn)，不僅僅可以縮放自如，而且還很容易維護(hù)，可以通過多種不同的途徑對它們進(jìn)行操作。

的確，字符圖標(biāo)并不是完美的，也存在一些的缺點(diǎn)。上面提到的屏幕閱讀器問題，也將在生產(chǎn)的廠家那里不斷地改善中……

字符圖標(biāo)不能完全解決你的響應(yīng)式圖片的問題，但是如果它們充當(dāng)這個(gè)的角色，它們是很出色的。

下一周我想去探究一下另外一種可以解決圖片問題但是目前使用不是很廣的方案，那就是“可伸縮向量圖形”（SVG）,它被作為一種可能取代位圖圖片的圖形技術(shù)。

出處：

英文原文：http://www.vanseodesign.com/web-design/icon-fonts/

中文譯文：http://www.w3cplus.com/css3/icon-fonts.html

　　哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站，并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底，使您的網(wǎng)站無需額外費(fèi)用，即可穩(wěn)步提升排名至首頁。歡迎體驗(yàn)最佳的哈爾濱網(wǎng)站建設(shè)。