深度剖析！瀏覽器字體渲染的秘密

說到web性能，前端工程師很自然地反應(yīng)是yahoo的30+條優(yōu)化規(guī)則。這些規(guī)則可以將網(wǎng)頁加載從原來的幾秒甚至十幾秒較少到3s甚至1s以內(nèi)。當(dāng)一個完整界面展現(xiàn)在用戶眼前時，內(nèi)容就通過不同的字體、圖片以及多媒體傳達(dá)給用戶。使用戶在1s內(nèi)看到網(wǎng)頁和使用戶留在網(wǎng)頁上幾分鐘甚至幾十分鐘同樣重要。字體作為內(nèi)容承載信息的重要部分，若使用不“適當(dāng)”的字體或者字體由于渲染等緣故對用戶不友好，則會（有可能）造成不必要的用戶流失。本文介紹瀏覽器的字體渲染，希望還未接觸字體渲染的同事能通過本文對字體渲染有所了解。

首先看下不同瀏覽器下的截圖:

很明顯地看出，Chrome35截圖中的非橫豎筆畫較IE11和Firefox30截圖中的有明顯的鋸齒。

理想的字體其邊緣過渡平滑，而在屏幕上顯示時，需要將字體柵格化(rasterization)為一個個像素點(diǎn)。采用黑白(black and white)渲染無法體現(xiàn)字體的細(xì)節(jié)之處，會造成了邊緣呈現(xiàn)鋸齒狀(jagged)的不平滑。為了解決這個問題，字體渲染引擎采用了以下方法進(jìn)行平滑(Antialiasing)：灰階(grayscale)渲染、亞像素(sub-pixel)渲染。

渲染方法

灰階渲染是一種通過控制字體輪廓上像素點(diǎn)的亮度達(dá)到字體原始形狀的方法。

亞像素渲染利用了LCD屏（液晶屏）中每個像素是由R、G、B三個亞像素的顏色和亮度混合而成一個完整像素的顏色這一原理，將字體輪廓上的像素點(diǎn)由三個亞像素體現(xiàn)以達(dá)到原始形狀的方法。與灰階渲染相比，分辨率在垂直方向放大了三倍，因此渲染效果更好，但是所耗內(nèi)存也更多。因此在手機(jī)屏上，為了減少CPU開銷，并未采用該字體渲染方法，而是采用的grayscale渲染。

操作系統(tǒng)中的渲染API

操作系統(tǒng)OS提供了支持不同的字體渲染方法的API。在windows下是GDI(Graphics Device Interface)和DirectWrite，OS X下是Quartz。

GDI分為GDI Grayscale和GDI ClearType。前者為灰階渲染API，后者是亞像素渲染API。由于GDI ClearType并未對字體進(jìn)行垂直方向的平滑，因此當(dāng)字體較大時會出現(xiàn)邊緣不平滑的情況。為了彌補(bǔ)GDI ClearType的不足，MS實(shí)現(xiàn)了DirectWrite API，它在GDI ClearType的基礎(chǔ)上增加了垂直方向的平滑。
但是！字體渲染的API都是由瀏覽器廠商自己選擇的！

使用同一顏色，感官上的顏色深淺為：黑白渲染>grayscale>sub-pixel。

Chrome35/36采用的是GDI ClearType，因此在字體較大時邊緣會出現(xiàn)毛刺，而FF30采用的DirectWrite則沒有此類問題。如下圖所示：

根據(jù)以上兩圖可以發(fā)現(xiàn)，Chrome的字體渲染效果沒有Firefox的好。為縮小Chrome與FF/IE的差異，一種方法是使用-webkit-text-stroke:0.5px;如果使用1px的話就有點(diǎn)粗了。

雖然該hack使Chrome下字體的邊緣有所光滑，但字體在webkit內(nèi)核瀏覽器中看上去“模糊”了。

常用字體在瀏覽器中的渲染情況

從使用Microsoft Yahei, Tahoma和Arial字體可以看出，在Chrome35中，由于轉(zhuǎn)換成GDI Grayscale渲染，49px的字比48px的邊緣光滑很多。字體較大時，GDI Grayscale比GDI ClearType具有更好的渲染效果。

在實(shí)際中會遇到在如Tahoma/Arial字體下17px和18px的“字重”有明顯差別。這個現(xiàn)象涉及到字體設(shè)計，簡單地說就是在瀏覽器渲染字體之前，字體本身會調(diào)整字型和筆畫所占像素。想了解更多細(xì)節(jié)，請參考a closer look at TrueType hinting。

啟動Chrome中的DirectWrite

在chrome://flags下啟用實(shí)驗(yàn)性DirectWrite字體渲染系統(tǒng)：#enable-direct-write會使48px以下的字體均為sub-pixel渲染。僅適用于測試環(huán)境！（需重啟Chrome）

Chrome37 beta將該特性移除實(shí)驗(yàn)特性，并將在Chrome37中實(shí)現(xiàn)在windows下使用DirectWrite API對字體渲染，相信在Chrome37中以上提到的瀏覽器字體渲染差異會得到解決。

字體格式在不同瀏覽器下的渲染

font-smoothing: subpixel-antialiased | antialiased;
對應(yīng)為sub-pixel和grayscale。
已廢止!

font-weight: bold;
Chrome35, IE7/8：與normal字體渲染一致(包括數(shù)字和字母);
IE9+/FF30：grayscale，部分簡單中文字體保持原有渲染。

font-style:italic;
Chrome35, IE7/8：與normal字體渲染保持一致;
IE9+/FF30：sub-pixel渲染。

opacity: 屬性值<1
Chrome35：sub-pixel渲染的字體“降級”為grayscale渲染;
IE9+/FF30：保持不變

transform 2D

transform: rotate(n);
n=90*k deg（k=整數(shù)）, 保持未旋轉(zhuǎn)的字體渲染；
others，sub-pixel渲染。Chrome35在48px+為grayscale渲染。
transform: scale(x,y); 與字體大小m有關(guān)。以simsun為例,具體如下：

Chrome35:
x*y*m<12, Chrome35 sub-pixel渲染;
12<x*y*m<=48*48=2304 sub-pixel渲染; x*y*m>2304 grayscale渲染，12px-24px存在一定范圍的黑白渲染（tahoma是12px-16px）。

FF30、IE9+：
m*m*n<=99*99=9801 sub-pixel渲染; m*m*n>9801 grayscale渲染。

transform: skew(n);
n=90*k deg(k為整數(shù)), 保持未傾斜的字體渲染；
others, sub-pixel渲染。Chrome35在49px+為grayscale渲染，IE9+, FF30在100px+為grayscale渲染。

transform 2D & transition

運(yùn)動中：以12px為例: 在Chrome35和FF30下，運(yùn)動中的字體均是grayscale渲染；
運(yùn)動結(jié)束：Chrome35, FF30, IE9+均為sub-pixel渲染。
從運(yùn)動開始到運(yùn)動結(jié)束產(chǎn)生了兩次渲染變化（sub-pixel到grayscale，grayscale到sub-pixel）會出現(xiàn)“閃現(xiàn)”的現(xiàn)象。

Transform 3D

當(dāng)元素進(jìn)入GPU中渲染時，在Chrome35+中的字體為grayscale渲染，IE11和FF30保持sub-pixel渲染不變。若transform值函數(shù)（如translate3d(), scale(), rotate()等）中的參數(shù)為非整數(shù)，會導(dǎo)致字體模糊。在使用iScroll模擬滾動的項目中會出現(xiàn)字體模糊。以下是對該問題的一個還原：

-webkit-transform: translate3d(1.5px, 1.5px,0);

-webkit-transform: translate3d(1px, 1px,0);

Chrome 36中使用transform不需要-webkit-前綴了！

為了防止以上模糊情況的出現(xiàn)，可以通過JS中的Math.round()/Math.ceil()/Math.floor()等函數(shù)使其為整數(shù)。

當(dāng)加入perspective()值時，F(xiàn)irefox30渲染又有所不同。

transform: perspective(1px) translate3d(1.5px, 1.5px,0);在FF30中作用的元素為grayscale渲染。

transform: perspective(1px) translate3d(1px, 1px,0); 在FF30中作用的元素為sub-pixel渲染

E11均為sub-pixel渲染。

此情況下運(yùn)用opacity<1的聲明，IE10+為grayscale。

Chrome transform: perspective()對文檔后面元素的影響

Chrome35+，當(dāng)transform中聲明有perspective()時，若文檔后面聲明transform的元素進(jìn)入該聲明作用的元素的layer-borders的區(qū)域時，仍然會受到該聲明的影響。聲明作用元素的溢出部分同樣會對后面元素造成影響。合成渲染層內(nèi)部文字進(jìn)入GPU渲染。

啟動Show composited layer borders，在Chrome中測試的結(jié)果截圖為：

總結(jié)

字體渲染與操作系統(tǒng)、瀏覽器、字體格式以及CSS屬性有關(guān)。本文重點(diǎn)羅列了一些在Windows Chrome中字體渲染與FF/IE的差異和對應(yīng)緩解/解決問題的方案。Chrome在字體渲染上目前落后于IE/FF，但之前官方博客稱Chrome 37將實(shí)現(xiàn)在windows下使用DirectWrite API，Chrome在字體渲染方面將趕上IE/FF等瀏覽器，以上的差異性也將減小甚至消失。

更多字體相關(guān)文章：
《網(wǎng)站字體渲染！聊聊各瀏覽器下字體排版一致的問題》
《推薦！WEB中文字體應(yīng)用指南》
《網(wǎng)頁設(shè)計新趨勢：我所知道的關(guān)于WEB字體的一切》

原文地址：攜程UED
作者：fhz
審閱：小志

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量74萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：