響應式Web圖形篇 —— icon fonts 的探析及應用

前言

像素完美（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 的相關標準。但在這以前你須要採起多管齊下的方式，針對媒體元素不一樣的使用場景，制定不一樣的自

適應策略。目前主要有三種主流方式：

1. max-width: 100% 來自適應容器 
   同一張圖片，在不一樣容器裏，自動適應到容器的大小。存在的問題是，大尺寸圖片在小尺寸屏幕下的帶寬浪費和加載速度慢。

    

2. 多版本圖片更換

   • 針對寫在CSS裏的background-image，能夠藉助 media query 來適應顯示 @1x 或 @2x 的版本。
   • 針對 HTML 裏的圖片能夠利用 Piturefill.js 來作自適應。

3. 使用矢量化圖形，包括

   • 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 的製做主要有兩條思路：

1. 利用字體工具手動製做
2. 利用在線工具自動生成

手動製做

在icon fonts 自動生成器沒有誕生之初，你們只能依靠字體編輯軟件來完成icon fonts 的製做，簡單介紹一下手動製做的流程。

1. 在 illustrator 或 Sketch 這類矢量圖形軟件裏建立你的 icon。

2. 而後把 icon 一個一個導入到字體編輯工具，轉換成 glyphs 進行編輯，設置對應的 unicode 編碼。經常使用字體工具備：

   • Glyphs
   • FontForge
   • FontCreator

3. 完成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網格內，參考基線、上升部、降低部來調整圖標大小和位置。

調整矢量圖標須要注意幾點：

1. 圖形須要閉合，不要用stroke，不然會顯示不出來
2. 圖形合併並擴展
3. 用單色
4. 在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 在移動端的兼容性稍微差一點，有幾個問題：

1. 瀏覽器根本不支持

   舉例 Opera mini，在移動設備和帶寬比較落後的地方，用戶量仍是很大的，若是你的網站訪問數據裏這類瀏覽器流量不可忽視，那麼你就須要額外處理 icon fonts 的向下兼容，好比 js 嗅探後用雪碧圖（CSS spirtes）替代。

   各平臺 icon fonts 的兼容狀況，參見這張網友測試聚集的表格。

2. 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
• fontfello

這些工具基本功能相似，但有少量功能差異，像 icomoon 還支持字體的連字（Ligatures）功能。經過設置 「bell」爲鈴鐺圖標的連字，當你在文本中寫 「bell」時自動轉換成鈴鐺圖標。像 fontfello是開源軟件，意味着更加靈活和定製的可能性。

若是你對使用英文軟件徹底沒有障礙，我強烈建議使用 icomoon，體驗和功能都很是強大。固然做爲國內的同行，仍是要支持一下 iconfont.cn。