前端圖片 - icon Fonts

水中花world發表於2018-05-23
前端

前言
畫素完美（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 也有它的不足：

  1. 樣式單一，無法針對不同解析度來調整icon 的細節，比如降低大尺寸icon 的線條粗細。
  2. 顏色單一，CSS 無法方便的去定義彩色的 icon，倒是有通過疊加組合的方式來達到彩色圖示的目的。
  3. 移動端瀏覽器相容性還不夠完善，像Opera mini、Windows phone 7.0-7.8 都不能正常顯示icon fonts。
  4. 有少量的移動裝置有可能會和 icon fonts 的字元編碼衝突，導致icon 顯示不正常（我們自己風車Android
    版本就碰到了這個問題）。

所以 icon fonts 也並不是一套完美的響應式圖片的解決方案，當它適宜你的應用場景時，比如：

你的網站是扁平化或簡約風格，圖示樣式單一，顏色為純色。
你的目標使用者使用桌面瀏覽器為主，或者，
你願意為非相容裝置做相容hack。
那麼 icon fonts 是一個令設計師和前端工程師都心花怒放的方案。

如何製作 icon fonts？
icon fonts 的製作主要有兩條思路：

  1. 利用字型工具手動製作
  2. 利用線上工具自動生成

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

在 illustrator 或 Sketch 這類向量圖形軟體裡建立你的 icon。
然後把 icon 一個一個匯入到字型編輯工具，轉換成 glyphs 進行編輯，設定對應的 unicode 編碼。常用字型工具有：

Glyphs
FontForge
FontCreator

完成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 在移動端的相容性稍微差一點，有幾個問題：

瀏覽器根本不支援

舉例 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 fontfello

這些工具基本功能類似，但有少許功能差別，像 icomoon 還支援字型的連字（Ligatures）功能。通過設定 「bell」為鈴鐺圖示的連字，當你在文字中寫 「bell」時自動轉換成鈴鐺圖示。像 fontfello 是開源軟體，意味著更加靈活和定製的可能性。

如果你對使用英文軟體完全沒有障礙，我強烈建議使用 icomoon，體驗和功能都非常強大。當然作為國內的同行，還是要支援一下 iconfont.cn。

結語

icon fonts 作為 web fonts 的一種「特殊」應用，很好的解決了「響應式設計」中圖形無損自適應的難題。設計師不再需要維護不同大小、不同顏色的多版本素材，圖形向量化之後，交給那些 線上生成器就可以了。對於前端工程師，利用 HTML+CSS 就可以靈活的使用成百上千種圖示，無需擔心切圖、定位、優化等傳統點陣圖要應付的情況。而使用者，簡潔、清晰的圖示帶給他們賞心悅目的感覺之外，瀏覽網站的速 度體驗也將大大提升。

生成font-face的工具，Font Squirrel
https://www.cnblogs.com/fjdingsd/p/5663561.html

相關文章