聲明：此文轉載自：http://www.cnblogs.com/tblog/p/4738816.html，僅供本人學習參考，版權歸原作者所有！
前言
像素完美（Pixel Perfection）、分辨率無關（Resolution Independent）和多平台體驗一致性是設計師們的追求。 可訪問性（Accessability）、加載性能和重構靈活性是前端工程師們關心的主題。
當下互聯網設備「風起雲涌」，顯示分辨率「層出不窮」，為 Web 創建者們帶來越來越多的難題。
- 需要為高PPI（aka Retina）顯示設備准備@1.5x、@2x、@3x的圖片素材；
- 需要針對不同顯示屏分辨率來調整優化排版；
- 需要考慮多個分辨率版本的圖片的加載性能問題；
- 設備版本碎片化（Version Segmentation）帶來的語義和可訪問性的問題；
- ……
響應式設計
響應式設計（Responsive Design）作為「救世主」的身份，已經在 Web 界布道了好幾年，絲毫不亞於當年的「Ajax」先生。其核心就是：針對不同設備和應用場景，作出合理性的適應。狹義地看，就是 Web page 在不同分辨率下借助 media qurey 來調整頁面布局和內容顯示，三個關鍵詞是：Fluid grids, Flexible images, Media queries.
其中 Flexible images 是最為棘手的地方。因為前面提到，現在的設備多樣化，不同分辨率和不同 PPI 給圖片自適應帶來了空前復雜度。目前還沒有一套完美的解決方案來應對，W3C那邊還在擬定 Responsive Images 和 Picture Element 的相關標准。但在這之前你需要采取多管齊下的方式，針對媒體元素不同的使用場景，制定不同的自適應策略。目前主要有三種主流方式：
-
max-width: 100% 來自適應容器
同一張圖片，在不同容器里，自動適應到容器的大小。存在的問題是，大尺寸圖片在小尺寸屏幕下的帶寬浪費和加載速度慢。 -
多版本圖片更換
- 針對寫在CSS里的background-image，可以借助 media query 來適應顯示 @1x 或 @2x 的版本。
- 針對 HTML 里的圖片可以利用 Piturefill.js 來做自適應。
-
使用矢量化圖形，包括
- icon fonts
- SVG
這一期我們主要來講講 icon fonts 的應用。
什么是 icon fonts?
利用字體工具把我們平時 Web 上用的圖形圖標（icons）轉換成 web fonts，就成了 icon fonts，它可以借助 CSS 的 @font-face 嵌入到網頁里，用以顯示 icons。因為字體是矢量化圖形，它天生具有「分辨率無關」的特性，在任何分辨率和PPI下面，都可以做到完美縮放，不會像傳統位圖， 如：png，jpeg，放大后有鋸齒或模糊現象。
注：上圖是 Apple 紀念 Mac 發布30周年網站截圖，網頁內大量運用了 icon fonts 來塑造不同年代發布的產品，這類 iOS 7 引入的線條風格圖標，使用 icon fonts 來表現最合適不過了。
為什么要用 icon fonts？
除了「分辨率無關」這個最大的優點之外，icon fonts 還具有：
- 文件小：相比圖片幾十幾百KB的容量，icon fonts 幾乎是羽翼級輕量。
- 加載性能好：因為圖標都被打包進一套字體內，http request 減少。這如同我們常用的 css sprites 技術。
- 支持CSS樣式：和普通字體一樣，你可以利用CSS來定義大小、顏色、陰影、hover狀態、透明度、漸變等等…
- 兼容性好：web fonts 起源很早，別說主流瀏覽器，連IE6/7都能良好支持。除了一些老的移動端瀏覽器，如Android 2.1以下的初代瀏覽器，Opera mini 這類自限型瀏覽器。
當然 icon fonts 也有它的不足：
- 樣式單一，無法針對不同分辨率來調整icon 的細節，比如降低大尺寸icon 的線條粗細。
- 顏色單一，CSS 無法方便的去定義彩色的 icon，倒是有通過疊加組合的方式來達到彩色圖標的目的。
- 移動端瀏覽器兼容性還不夠完善，像Opera mini、Windows phone 7.0-7.8 都不能正常顯示icon fonts。
- 有少量的移動設備有可能會和 icon fonts 的字符編碼沖突，導致icon 顯示不正常（我們自己風車Android 版本就碰到了這個問題）。
所以 icon fonts 也並不是一套完美的響應式圖片的解決方案，當它適宜你的應用場景時，比如：
- 你的網站是扁平化或簡約風格，圖標樣式單一，顏色為純色。
- 你的目標用戶使用桌面瀏覽器為主，或者，
- 你願意為非兼容設備做兼容hack。
那么 icon fonts 是一個令設計師和前端工程師都心花怒放的方案。
如何制作 icon fonts？
icon fonts 的制作主要有兩條思路：
- 利用字體工具手動制作
- 利用在線工具自動生成
手動制作
在icon fonts 自動生成器沒有誕生之初，大家只能依靠字體編輯軟件來完成icon fonts 的制作，簡單介紹一下手動制作的流程。
- 在 illustrator 或 Sketch 這類矢量圖形軟件里創建你的 icon。
-
然后把 icon 一個一個導入到字體編輯工具，轉換成 glyphs 進行編輯，設置對應的 unicode 編碼。常用字體工具有：
-
完成glyphs 編輯后，從字體工具導出 OTF 字體文件，然后利用 Font Squirrel 生成器來生成 web fonts 支持的格式。
手動制作 icon fonts 需要具備一定字體設計的知識，如有興趣可作嘗試。而自動生成工具用起來就傻瓜和省心多了。
自動生成
我們「風車」去年底進行了一次改版，其中一項就是把原來位圖圖標全部轉換成 icon fonts，當時采用的是阿里巴巴提供的免費在線工具iconfont.cn。
Iconfont.cn是由阿里巴巴UX部門推出的矢量圖標管理網站，也是國內首家推廣Webfont形式圖標的平台。網站涵蓋了1000多個常用 圖標並還在持續更新中，Iconfont平台為用戶提供在線圖標搜索、圖標分撿下載、在線儲存、矢量格式轉換、個人圖標庫管理及項目圖標管理等基礎功能。
「風車」應用內的圖標有兩個來源： 一些從開源圖標庫拿來，一些是設計師自己制作。接下來詳細介紹一下，我們是如何利用 iconfont.cn 這個在線工具生成了這 56 個圖標的 icon fonts。
步驟一
參照 iconfont.cn 提供的圖標制作模版，在Illustrator 畫布的16x16網格內，參考基線、上升部、下降部來調整圖標大小和位置。
調整矢量圖標需要注意幾點：
- 圖形需要閉合，不要用stroke，否則會顯示不出來
- 圖形合並並擴展
- 用單色
- 在16x16畫布中進行排版，這樣制作好的icon fonts 16px 大小的時候和其它字體保持一致。
步驟二
然后從Illustrator 保存為SVG文件，使用默認的SVG設置即可。
步驟三
你可以拖動一個或多個SVG圖標到iconfont.cn 的上傳表單，完成上傳后會提示設置名稱和tag，點擊「完成上傳」開始生成icon fonts 。生成完成后，你可以點擊要下載的圖標加入購物車，然后「下載至本地」。
(點擊圖像放大)
步驟四
解壓剛下載的文件包，除了EOT、SVG、TTF、WOFF四種 web fonts 字體外，還有個 demo.html 展示所有 icons 及其對應的字體編碼。之所以有4種字體格式，是考慮到不同瀏覽器不同平台對字體格式的支持不一樣，具體看下面 CSS 里的注解。
復制4個字體文件到 assets 或 fonts 目錄下，然后在 CSS 文件加入 @font-face 聲明(注意更改字體所在的文件路徑)。
@font-face {font-family: 'iconfont';
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome、firefox */
url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('iconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */
}
再定義一個 icon-* 通配我們所有圖標的共有 CSS 樣式，
[class^="icon-"], [class*=" icon-"] {
display: inline-block;
speak: none
font-family: "iconfont";
font-size: 16px;
line-height: 1;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
最后是利用 :before 來注入每個 icon 對應的字體編碼
.icon-bell:before {
content: "\003432";
}
.icon-search:before {
content: "\003433";
}
現在你可以這樣顯示一個鈴鐺圖標：
<i class="icon-bell"></i>
下圖就是我們「風車」應用 icon fonts 的實例。
(點擊圖像放大)
icon fonts 移動端應用
前面提到， icon fonts 在移動端的兼容性稍微差一點，有幾個問題：
-
瀏覽器根本不支持
舉例 Opera mini，在移動設備和帶寬比較落后的地方，用戶量還是很大的，如果你的網站訪問數據里這類瀏覽器流量不可忽視，那么你就需要額外處理 icon fonts 的向下兼容，比如 js 嗅探后用雪碧圖（CSS spirtes）替代。
各平台 icon fonts 的兼容情況，參見這張網友測試匯集的表格。
-
unicode 沖突問題
一般情況下，icon fonts 生成器會使用 PUA（Private Unicode Area）這個安全區域的字符編碼（code point）。PUA 是專門預留「私用」的 unicode 區間, 一般會用 U+E000..U+F8FF 這個 BMP 區間里預留的 PUA code point.
比如： 這個Apple 平台特有的字符，就是用 U+F8FF 這個code point 來對應的，在其它平台就看不到那個字符。
阿里巴巴的 iconfont.cn 沒有遵循這個最佳實踐，用得的是 CJK 編碼區間（U+3432），所以當你瀏覽器加載字體出問題時，會還原成一些奇怪的中文文字，這對讀屏軟件也非常不友好。好在它的管理后台，可以手動的編輯這個 code point。
另外，如果發現有 icon 顯示不出來，或被替換成了其它字符，那么更換一下 code point 可能可以快速的解決。
關於如何應用 icon fonts 到原生的 iOS/Android App 中去，iconfont.cn 上面有具體的教程，可以查看一下。
其它 icon fonts 工具
類似 iconfont.cn 這類在線生成工具有很多，就不再一一詳細介紹，最著名的還有：
這些工具基本功能類似，但有少許功能差別，像 icomoon 還支持字體的連字（Ligatures）功能。通過設置 「bell」為鈴鐺圖標的連字，當你在文本中寫 「bell」時自動轉換成鈴鐺圖標。像 fontfello 是開源軟件，意味着更加靈活和定制的可能性。
如果你對使用英文軟件完全沒有障礙，我強烈建議使用 icomoon，體驗和功能都非常強大。當然作為國內的同行，還是要支持一下 iconfont.cn。
結語
icon fonts 作為 web fonts 的一種「特殊」應用，很好的解決了「響應式設計」中圖形無損自適應的難題。設計師不再需要維護不同大小、不同顏色的多版本素材，圖形矢量化之后，交給那些 在線生成器就可以了。對於前端工程師，利用 HTML+CSS 就可以靈活的使用成百上千種圖標，無需擔心切圖、定位、優化等傳統位圖要應付的情況。而用戶，簡潔、清晰的圖標帶給他們賞心悅目的感覺之外，瀏覽網站的速 度體驗也將大大提升。