隨著硬件快速的發展，Retina技術發展至今，目前Google Nexus6的devicePixelRatio已經到了3.5，雖然目前主流的Retina顯示器還是以devicePixelRatio = 2的為主，但是為了更好的用戶體驗，前端和視覺同學經常都要為了各種圖標能夠在Retina屏幕下高清顯示而頭痛。下面先介紹下目前的一些常規的解決方案。

騰訊干貨：《騰訊力作！超實用的IOS 9人機界面指南（1）：UI設計基礎》

1. 多倍圖片

目前用的比較多的做法是兼容devicePixelRatio = 2 就做實際圖片大小的兩倍，devicePixelRatio= 3就做三倍，有些人可能會直接做3倍的圖片，這樣就可以同時兼容devicePixelRatio = 2 ，但是這樣其實對于devicePixelRatio = 1和devicePixelRatio = 2的用戶他們就會浪費帶寬去加載devicePixelRatio = 3的圖片，所以為了提升用戶體驗，一般我們會分開做幾套圖片，根據用用戶的devicePixelRatio判斷讓他們加載對應的圖片。

2. iconfont字體圖標

在很多國外的響應式站點里一般會采用iconfont，因為可以直接通過font-size和color屬性來控制icon的大小和顏色，非常方便，而且由于iconfont本身就是字體文件，會矢量適配各種不同devicePixelRatio，但是在PC上當圖標小于等于16px時，或者復雜度高的圖標會出現比較嚴重鋸齒，圖標無法展示清晰，特別在chrome下的表現尤為嚴重。正因為如此這個技術在推進過程中遇到許多困難，因為在很多場景下圖標確實會較小甚至小于16px，而且有些16px的圖標如果復雜度較高，iconfont實現出來的icon會經常出現看不清的情況，而且國內PC用戶是占最多的，所以iconfont的這種表現效果很多用戶和設計師無法接受。

為什么iconfont會出現鋸齒？

這個問題其實并不是iconfont的錯，但很多人都覺得是它的問題，關于鋸齒問題，我們先來了解下瀏覽器的字體渲染機制：

（從左到右依次）理想的渲染狀態、黑白渲染、灰度渲染、次像素渲染

上圖左側第一張是我們認為一種比較理想的渲染效果，但是通過剛才我們介紹柵格我們可以了解到這種狀態是不可能的，因為第一代黑白渲染和第二代灰度渲染是不可能做到顯示半格像素或一個像素中顯示弧度的。

黑白渲染和灰度渲染在渲染圖形遇到半格像素或則弧度的時候，他們會有各自不同的處理方式；

舉個例子：

如上圖紅點處像素，我們理解他是有弧度的，且不占滿一個像素；各個渲染方式的處理辦法如下：

黑白渲染

黑白渲染相對來說比較粗暴，直接通過四舍五入的形式把這里要描繪的圖形不顯示了；（黑白渲染的形式主要應用于打印機渲染，但是打印機本身的精度非常高，所以打印出來的圖形還是很細膩的）

灰度渲染

灰度渲染顯得就智能一些了，他通過灰度降級的方式來表達，如果占不到一個像素那就根據他占的面積來降低這個像素的灰度；占的面積越小灰度就越低；

次像素渲染

次像素渲染是第三代渲染方式，相對來說比較高級，他從從左至右將一個像素分成三份；用不同的色彩值來顯示圖形，這樣圖形看起來就更加細膩；

現代瀏覽器字體渲染技術

目前mac系統采用的就是次像素渲染技術，但是現代的window下的高級瀏覽器例如：IE9+ 、chrome、FF等瀏覽器采用的是?DirectWrite?或?GDI?這種更高級的字體渲染技術，這里我簡單介紹下這兩種新的字體渲染技術：

上圖從左至右分別用的是：灰度渲染、次像素渲染和?DirectWrite?或?GDI?實現的效果，在FF官方博客中有一篇文章對這兩個新的渲染技術做了簡單的一個解釋，他們兩個都是采用的LCD的像素紅色、綠色、藍色來進行像素填充，右側的文字被放大后我們看到了字體柵格被不同色塊填充，其實人眼對于亮度差異非常的敏感，當這些顏色用在像素級別里面我們的眼睛往往認為字形比單純灰度消除鋸齒的效果更好。

在Windows下的Firefox 4中采用的就是GDI這個技術進行字體渲染的，但是到了Firefox 4+之后的版本開始使用了DirectWrite這個技術，官方解釋是說DirectWrite支持硬件加速，而且API也更加現代，而GDI API存在許多缺陷和問題。

關于DirectWrite和GDI他們之前的差異這里不作太多描述，在文章最后有相關文章鏈接，有興趣的同學可以查看下。上面講了字體渲染的歷史，我們現在來看看目前Windows系統下的瀏覽器各自都是采用的都是什么字體渲染機制：

Chrome目前依舊是使用DirectWrite，而FF和IE9+已經是采用GDI 了，這就是為什么iconfont在Chrome下鋸齒會比其他瀏覽器嚴重的原因，可能GDI確實像FF官方說的存在許多缺陷，不知為何Chrome至今還在使用這個技術。

上面說了這么多關于字體渲染機制原理，在這里能得出一個結論：?不管目前使用什么字體渲染技術，字體顯示效果始終是會出現鋸齒的。在Retina屏幕上，一個像素被拆成了4個像素，由于它的密度非常高，肉眼根本是看不出鋸齒的，所以現在MAC系統下的FF和Chrome都還是用的次像素渲染這項技術。既然iconfont他是一個字體，就難逃出現鋸齒的命運，特別在Chrome下就是更加的糟糕了，目前確實通過前端代碼也是無法改變這個缺陷。

iconfont由于這個嚴重的鋸齒缺陷導致一些大型的站點很多時候并不會考慮大規模使用它，例如QQ空間，騰訊云這些站點早期也都嘗試過iconfont方案，但最后都放棄了，為了能給用戶更好的感官體驗。像淘寶雖然目前有許多地方都用了iconfont但也只是局部使用，并非全站使用。

SVG技術

什么是SVG？?SVG可縮放矢量圖形（Scalable Vector Graphics）是基于可擴展標記語言（XML），用于描述二維矢量圖形的一種圖形格式。SVG是W3C制定的一種新的二維矢量圖形格式，也是規范中的網絡矢量圖形標準。SVG嚴格遵從XML語法，并用文本格式的描述性語言來描述圖像內容，因此是一種和圖像分辨率無關的矢量圖形格式。簡單的說他就是一個可伸縮矢量圖形 (Scalable Vector Graphics)，在瀏覽器中采用繪圖技術。

接下來我們來看看使用iconfont和使用SVG做出來的圖標有什么差異：

Chrome下效果：

FF下效果

IE9下效果

上面的demo分別在不同瀏覽器下的效果，第一行用的是iconfont實現，下面三行都是用的SVG實現的圖標，只是調用SVG時的方法不同：第一行是用inline SVG，將SVG直接寫在html中來使用，第二行是用的img標簽去調用SVG，第三行用樣式的background來調用SVG文件。從Chrome和FF下的顯示效果，我們看到SVG畫的ICON的質量確實是比iconfont要好，iconfont做的圖標，我截圖后放大后看到線的邊緣發虛了，這是因為字體渲染的原因導致，在FF下也是發虛，只是不那么明顯。在IE9+下的效果上我們看到IE對SVG的支持性著實差的令人無法直視，IE10，IE11效果和IE9幾乎一樣（真的是坑爹）。

如何繪制高質量ICON

在上面的demo中眼尖的同學應該可以看出在FF下，inline SVG圖標有一個出問題了，然而Chrome卻是正常的：

但左邊那個圖標卻是正常的，相當不科學，如果是渲染問題理應左邊的也發虛才對，但是卻只有右邊的出問題了，定位了很久問題出在哪里，最后發現是畫AI文件時出問題了，AI本身不像PS那樣，有網格輔助視覺畫圖，所以iconfont.cn出了一個AI模板，其實這套模板就是給AI畫了一套輔助線，幫助設計師按照柵格畫ICON，我前面的案例就是用的他們提供的模板畫的圖標，第一個沒問題，但是第二個出問題了。他們這套AI模板實際導出后的畫布大小是1002p*1002px，然后分成1616個格子，也就是每個格子實際分得62.625px*62.625px，其實在很多時候貌似不會出問題的，但是我的demo中卻出問題了，于是猜測：

• 是否是繪制圖標出問題了，沒有按照某種規范畫法？
• 是否是因為他的網格不能被整除導致的？

1、由于繪制這個鎖型的圖標時我們留下了一個單數列，會不會因為這樣導致了他出現鋸齒，如果是，那問題就來了，如果一定要左右對稱或者每次畫圖都要鋪滿所有格子，這種做法不太現實，因為很多圖標是不一定都全部能鋪滿16*16的格子。

2、發現iconfont這套模板的網格有些問題，畫布網格竟然有1px像素是留空的，也是說16格子其實是1001/16=62.5625px，雖說畫布是1002px，不知道這是否是人工失誤。

決心和視覺自己做一套AI模板，AI模板也是1616的網格，但是每個網格將他們的實際導出像素設置成1px,也就是整個畫布是16px16px，這樣的就不怕不會被整除了。然后用新AI模板重新做了三個圖標，進行測試，左右上下對稱的做了一個，不能左右對稱的做了一個，左右上下不能對稱的也做了一份。然后導出效果查看：

按照這套模板做了圖標后，FF下面三個圖標都是完美的，沒有出現虛邊，并且Chrome也同樣是完好的，這是我們希望看的的。也證實了上面的兩個問題猜測是正確的。所以這套AI模板是完全可以滿足不同場景圖標繪制。

小結：

本文介紹了字體渲染機制，并分析iconfont出現鋸齒的底層原因，再到如何繪制高質量SVG ICON的步驟和輸出了一套嚴謹的AI繪制圖標模板。

明天將介紹如何在項目中應用SVG圖標，并兼容IE6+ 、Chrome 、 FF 、Retina Safari 、 Retina Chrome等瀏覽器的方案。

AI模板下載鏈接：http://pan.baidu.com/s/1bnc9eqj

優設國內設計大牛專訪系列：

1. 《優設訪談！騰訊設計師米田的設計之道與成長之路》
2. 《優設訪談！著名設計師馮鐵的設計思考與經驗之談》
3. 《優設訪談！騰訊高級交互設計師C7210的十年設計路》

原文地址：騰訊ISUX

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量103萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com