圖片是有諸多優點的，然而目前在網站設計這行業面臨各種各樣的挑戰。圖片不但增加了總文件的大小，還增加了很多額外的"http請求"，這都會大大降低網頁的性能的。圖片還有一個缺點就是不能很好的進行“縮放”，因此，有時候在“響應式設計”中需要使用圖像的最好解決方案就是不去使用圖片。
上一周我提出一個關於“在‘響應式設計’中圖像處理的關鍵問題”的概述：尤其是如何為各種尺寸的設備提供相適應的的圖片？而今天我會認真考慮一下“字符圖標”，並且我們可以在我們的網頁中使用“字符圖標”來代替一些圖片，達到一樣的效果。
字符圖標的優點
位圖圖片不能很好地進行縮放，當圖片進行放大時會失真（即變模糊），當圖片進行縮小時就會浪費掉像素。而且加載每一張圖片都需要一次“http請求”，因此也拖慢了整個加載頁面的時間。另外，要是沒有圖片編輯器（軟件）的話就很難對圖片進行編輯、處理等操作。
字體就不會有以上這些問題，字體可以進行隨意縮放並且每一個字符都不需要進行額外的“http請求”。當我們把字體當成文字用來寫作的時候，往往沒有想到的是，它們只是一種形狀而已。如果把這些字體看成圖標，將又將會產生是怎樣結果呢？
“‘字符圖標’是非常美妙、神奇的”， Chris CoyIEr如是說。他制作關於“字符圖標”的Demo頁面就列出6大理由，為什麼“字符圖標”是如此美妙與神奇？
- 很容易任意地縮放；
- 很容易地改變顏色；
- 很容易地產生陰影；
- 可以擁有透明效果；
- 一般來說，有先進的浏覽器支持；
- 可以使用CSS來裝飾（可以得到CSS很好支持）；
- 可以快速轉化形態（做出一些變化，如 :hover等）；
- 可以做出跟圖片一樣可以做的事情（改變透明度、旋轉度，等）；
- 本身體積更小，但攜帶的信息並沒有削減。
讓我們來看位圖做的效果
如何使用字符圖標？
想要使用字符圖標的第一步是去找到並且嵌入這些字體。我將會在文章的後面告訴你去一些地方尋到它們。當你有了字體，你就可以使用字體方法來使用它。我推薦這文章Paul Irish寫的有關於@font-face語法。
有關於@font-face更多的中文教程，在W3cplus已有多篇教程，如果您對此非常感謝興趣，猛擊這裡。 ——大漠
一般來說，這裡有3種方法：
- 把字符直接寫在Html文件裡；
- 使用CSS來生成內容；
- 用
data-icon屬性
把字符直接寫在Html文件裡
這個方法是簡單而且直觀的，見如下代碼，我用一個<span>元素去包含一個字符“s”(即是字母“s”)，然後給這個<span>添加一個類。這個字母在選定的字體中被映射到一個特定的圖標。
為了顯示效果，還需要編寫樣式類：.icon來決定此字符以哪種字體風格來顯示，如下：
這是個簡單的例子，但是通常你用字母當作為字符的時候，攜帶的信息量是較少的。字母是可以被屏幕閱讀器讀取到的，往往有時候你只是想僅作為圖片被看到而已，會有那麼一群人（如視障人士）是需要聽內容的。
使用CSS來生成內容
讓我們更深入點，不直接在Html文件裡添加字符，我們用CSS來生成字符內容。見代碼如下：
可以看出，我添加了一個類名“cart”。神奇的就事就發生在CSS中，跟上面一樣，第一步先定義好字體,然後我們可以使用:before偽元素來產生字符圖標，其中“before”表示字符出現在左邊，“after”則出現在右邊。
同樣是需要使用字母s來映射出圖標，只不過區別是移除了Html標簽換用了CSS樣式實現。這是好事，但是，屏幕閱讀器還是會讀出字母的，這樣子也不是很好。
用“data-icon”屬性
一個跟上面相似方法就是使用Html5的“data-”屬性，接下來我們就創建一個data-icon屬性。
跟上面一樣，我們也將添加需要的字體font-family，然後我們通過使用data-icon來創建字母（字符），如：
但是這些寫還是會出現跟上面一樣的問題，屏幕閱讀器還是會讀出字母的。
更好的 Data-Icon 方法
嘗試去優化上面提到的Data-Icon方法，Chris CoyIEr就給出兩個方法，一種是用類似的圖標代表某個字符；另外一種是就直接使用標准的圖標圖片。
這裡就展示第一種的做法，我們給當前元素添加一個新的屬性：aria-hidden，並賦值為“true”。
aria-hidden=”true”是為了防止被閱讀器直接把字符讀取出來，但是也不是對所有的平台都奏效。
再結合一些搭配使用的CSS屬性，可以寫成如下代碼：
最後一個 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）,它被作為一種可能取代位圖圖片的圖形技術。
譯者手語：整個翻譯依照原文線路進行，並在翻譯過程略加了個人對技術的理解。如果翻譯有不對之處，還煩請同行朋友指點。謝謝！