爲何要用和如何使用字體圖標

圖片是有諸多優勢的，然而目前在網站設計這行業面臨各類各樣的挑戰。圖片不但增長了總文件的大小，還增長了不少額外的"http請求"，這都會大大下降網頁的性能的。圖片還有一個缺點就是不能很好的進行「縮放」，所以，有時候在「響應式設計」中須要使用圖像的最好解決方案就是不去使用圖片。們能夠在咱們的網頁中使用「字符圖標」來代替一些圖片，達到同樣的效果。

字符圖標的優勢

位圖圖片不能很好地進行縮放，當圖片進行放大時會失真（即變模糊），當圖片進行縮小時就會浪費掉像素。並且加載每一張圖片都須要一次「http請求」，所以也拖慢了整個加載頁面的時間。另外，要是沒有圖片編輯器（軟件）的話就很難對圖片進行編輯、處理等操做。

字體就不會有以上這些問題，字體能夠進行隨意縮放而且每個字符都不須要進行額外的「http請求」。當咱們把字體當成文字用來寫做的時候，每每沒有想到的是，它們只是一種而已。若是把這些字體當作圖標，將又將會產生是怎樣結果呢？

 

• 很容易任意地縮放；
• 很容易地改變顏色；
• 很容易地產生陰影；
• 能夠擁有透明效果；
• 通常來講，有先進的瀏覽器支持；
• 可使用css來裝飾（能夠獲得CSS很好支持）；
• 能夠快速轉化形態（作出一些變化，如 :hover等）；
• 能夠作出跟圖片同樣能夠作的事情（改變透明度、旋轉度，等）；
• 自己體積更小，但攜帶的信息並無削減。

如何使用字符圖標？

想要使用字符圖標的第一步是去找到而且嵌入這些字體。我將會在文章的後面告訴你去一些地方尋到它們。當你有了字體，你就可使用字體方法來使用它。我推薦這文章Paul Irish寫的有關於@font-face語法。

通常來講，這裏有3種方法：

• 把字符直接寫在html文件裏；
• 使用css來生成內容；
• 用data-icon屬性

把字符直接寫在html文件裏

這個方法是簡單並且直觀的，見以下代碼，我用一個<span>元素去包含一個字符「s」(便是字母「s」)，而後給這個<span>添加一個類。這個字母在選定的字體中被映射到一個特定的圖標。

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

爲了顯示效果，還須要編寫樣式類：.icon來決定此字符以哪一種字體風格來顯示，以下：

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

這是個簡單的例子，可是一般你用字母看成爲字符的時候，攜帶的信息量是較少的。字母是能夠被屏幕閱讀器讀取到的，每每有時候你只是想僅做爲圖片被看到而已，會有那麼一羣人（如視障人士）是須要聽內容的。

使用css來生成內容

讓咱們更深刻點，不直接在html文件裏添加字符，咱們用css來生成字符內容。見代碼以下：

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

能夠看出，我添加了一個類名「cart」。神奇的就事就發生在css中，跟上面同樣，第一步先定義好字體,而後咱們可使用:before僞元素來產生字符圖標，其中「before」表示字符出如今左邊，「after」則出如今右邊。

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

一樣是須要使用字母s來映射出圖標，只不過區別是移除了HTML標籤換用了CSS樣式實現。這是好事，可是，屏幕閱讀器仍是會讀出字母的，這樣子也不是很好。

用「data-icon」屬性

一個跟上面類似方法就是使用html5的「data-」屬性，接下來咱們就建立一個data-icon屬性。

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

跟上面同樣，咱們也將添加須要的字體font-family，而後咱們經過使用data-icon來建立字母（字符），如：

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

可是這些寫仍是會出現跟上面同樣的問題，屏幕閱讀器仍是會讀出字母的。

更好的 Data-Icon 方法

嘗試去優化上面提到的Data-Icon方法，Chris Coyier就給出兩個方法，一種是用相似的圖標表明某個字符；另一種是就直接使用標準的圖標圖片。

這裏就展現第一種的作法，咱們給當前元素添加一個新的屬性：aria-hidden，並賦值爲「true」。

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

aria-hidden=」true」是爲了防止被閱讀器直接把字符讀取出來，可是也不是對全部的平臺都奏效。

再結合一些搭配使用的css屬性，能夠寫成以下代碼：

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

最後一個 speak: none，其實具體做用不是很可靠的，寫上這個只是爲了以防萬一，可以用上，就能夠派上用場了。你還能夠從Chris Coyier的一篇文章post describing both methods看到上面全部講到的例子，能夠學習到更多。

字符圖標的缺點有哪些？

到目前爲止，咱們聽到的都是字符圖標的好處和優勢。難道字符圖標就沒有任何缺點嗎？那麼，接下來正是要說說缺點，或者說很差之處。咱們提過咱們是不肯意讓屏幕閱讀器去讀出咱們的字符圖標了，那就提一下其它的。

• 它們只能被渲染成單色或者css3的漸變色；
• 你使用限制是很大的，除非你想花時間去創做你本身的字符圖標；
• 創做字符圖標是很耗時間的。

第一條不是很大問題，由於你將不會哪裏都使用它們，不過就是由於字符圖標受顏色的限制這個根本性因素使得它不能普遍使用。

最後兩條也不是很大問題，不少免費、優秀的字符圖標不斷地增多，所以能夠利用的這些資源也是不斷增多，因此沒必要要必定去原創屬於本身的字符圖標。

從上面講的方法中，咱們已經知道主要有兩種方法來解決屏幕閱讀器的問題：在html的元素使用aria-hidden屬性和把內容寫在CSS裏面。還有一種可能更好的方式就是把圖標映射到統一字符編碼標準的字母。不少不少還沒被編碼的代碼進行映射性編碼能夠看成圖標使用的話，也就不會被屏幕閱讀器讀出來了。

哪裏能夠獲得字符圖標？

文章一開始就說會指導你去得到字符圖標，如今就開始講解。下面列出一系列的連接，但我也相信不僅只有這麼一些連接能夠獲得你滿意的字符圖標，並且未來會有更多的人去創造更多的圖標。

• Pictos
• Fico
• Sosa
• Foundation
• Symbolset
• IcoMoon
• Entypo
• Fontello
• ShiftIcons
• Heydings Controls
• A Delicious stack about icon fonts

若是你是個才華橫溢，有能力去建立本身的字符圖標的人，我確定下面列出的工具網站會對你頗有幫助的。

• Glyphs font editor for Mac
• Font Creator for Windows
• Font Lab Studio
• Tutorial using Photoshop, Illustrator, and Glyphs

總結

字符圖標並非適合全部的場合，可是在某扮演圖標這方面的確很優秀、突出。甚至有比圖片更多的優勢，不只僅能夠縮放自如，並且還很容易維護，能夠經過多種不一樣的途徑對它們進行操做。

的確，字符圖標並非完美的，也存在一些的缺點。上面提到的屏幕閱讀器問題，也將在生產的廠家那裏不斷地改善中……

字符圖標不能徹底解決你的響應式圖片的問題，可是若是它們充當這個的角色，它們是很出色的。

下一週我想去探究一下另一種能夠解決圖片問題可是目前使用不是很廣的方案，那就是「可伸縮向量圖形」（SVG）,它被做爲一種可能取代位圖圖片的圖形技術。