@Ryekee：最近在看關(guān)于字體渲染技術(shù)的時(shí)候在SmashingMagazine上看到了這篇文章，覺得算是對(duì) Windows、MacOS 以及 iOS上渲染技術(shù)說的比較詳細(xì)的了题禀，就翻譯成了中文，同步更新于Ryekee_Blog和localhost/Ryekee膀捷。有任何錯(cuò)誤或者不當(dāng)?shù)姆g歡迎指出。:-)
在Mac OS的Finder下或者網(wǎng)頁（隨便什么瀏覽器）中對(duì)文本截屏削彬，之后對(duì)圖片放大放大不斷放大全庸，就可以看到下圖所示這樣奇怪的東西了。為什么純黑圓滑優(yōu)美可愛的字體放大之后會(huì)有奇怪的顏色出現(xiàn)呢融痛？這背后又有什么神奇的奧秘呢壶笼？歡迎來到本期「走進(jìn)科學(xué)」之字體渲染的奧秘。
引言
兩年多（原文寫于2012年）以前開始的Web字體革命雁刷，引出了一個(gè)我們忽視了多年的問題：字體渲染覆劈，新被發(fā)明出來的Web字體給我們帶來了新的挑戰(zhàn)。選擇使用一個(gè)字體不再僅僅涉及到樣式的問題，它更值得我們?nèi)ヌ綄ぜ夹g(shù)上是如何實(shí)現(xiàn)的了责语。
雖然我們無法改變網(wǎng)站訪客的瀏覽器和操作系統(tǒng)炮障，但了解字體渲染的原理，有助于我們搭建一個(gè)對(duì)所有人都友好易讀的網(wǎng)站坤候。直到最近胁赢，我們可以使用的「Web零風(fēng)險(xiǎn)」字體屈指可數(shù)。但這些字體都為屏幕顯示進(jìn)行了精心的設(shè)計(jì)以及優(yōu)化白筹，因此你大可以放心它們的顯示效果智末。
如今，當(dāng)我們?yōu)榫W(wǎng)站選擇字體時(shí)徒河，有了更大的靈活性系馆。可以清楚的看到顽照，字體設(shè)計(jì)的渲染技術(shù)已經(jīng)悄然發(fā)生了改變由蘑。操作系統(tǒng)廠商正在采用不同的字體渲染策略，而這一情況還將隨時(shí)間繼續(xù)演化棒厘。隨著對(duì)屏幕上的字體更加深入的了解纵穿，我們已經(jīng)意識(shí)到，這些字體的渲染會(huì)因?yàn)椴僮飨到y(tǒng)和字體格式而存在著明顯的差異奢人。蛋疼的是谓媒，即便是精心設(shè)計(jì)的字體可能看上去都不適合Windows，只因?yàn)樗鼈內(nèi)鄙倭撕苤匾囊兀鹤煮w微調(diào)（hinting）何乎。
本文將介紹字體渲染的原理句惯，它們被開發(fā)出來的歷程，以及它們是怎么被應(yīng)用在不同的操作系統(tǒng)和瀏覽器中的支救。因此當(dāng)你為你下一個(gè)項(xiàng)目挑選字體時(shí)抢野，你就知道要怎么樣才可以確保排版的效果了。
渲染策略
柵格化（Rasterization）
在數(shù)字形態(tài)（digital type）中，字體被設(shè)計(jì)成矢量的圖像整陌。當(dāng)文本在屏幕上顯示時(shí)锁荔，需要將圖形柵格化，理想的顯示效果是需要不同的大小的一個(gè)個(gè)像素網(wǎng)格來共同組成字體的黎做。你可以看到理想的形狀中e的邊緣并沒有占滿整個(gè)像素叉跛，但由于我們所能控制的最小元素就是像素了，也就造成了現(xiàn)實(shí)與理想的差距蒸殿。
因此筷厘，工業(yè)界發(fā)明出了越來越先進(jìn)的渲染策略鸣峭，以確保屏幕顯示的字體友好易讀。
黑白渲染（Black and white rendering）
最早的字體渲染技術(shù)是使用黑白兩色來填充像素酥艳，有時(shí)這種方法也被稱作二值渲染（bi-level rendering）摊溶。目前打印機(jī)仍在使用這種方法，但由于打印機(jī)的高分辨率玖雁，打印的效果可以很好地還原原始的設(shè)計(jì)更扁。
然而當(dāng)這一技術(shù)應(yīng)用于屏幕時(shí)，早期屏幕的低分辨率的局限性使得字體的呈現(xiàn)效果并不好赫冬。雖然肉眼無法分辨每個(gè)像素浓镜，但是難看的鋸齒邊緣卻很明顯。
灰度渲染（Grayscale rendering）
從上世紀(jì)九十年代中期開始劲厌，我們的前人開始采用了一種很聰明方式膛薛，雖然當(dāng)時(shí)的分辨率依舊很低，但可以控制每個(gè)像素的灰度补鼻，這就可以在柵格化的圖像中存儲(chǔ)更多的信息哄啄，以使字體邊緣變得更加平滑。這就是灰度渲染风范。
在灰度渲染中咨跌，邊緣的像素不再是純黑的，它的灰度值取決于理想的字型在此像素所覆蓋的面積比例硼婿。這樣锌半，字體的輪廓看起來更加平滑，設(shè)計(jì)的細(xì)節(jié)也更加豐富寇漫。屏幕上的字體不再僅僅滿足于清晰可辨刊殉，它們甚至還可以體現(xiàn)字體本身的特征和風(fēng)格。
這一方法也被稱作抗鋸齒渲染州胳，與照片重新采樣（resampled）到一個(gè)較低分辨率時(shí)的原理是相同的记焊。我們的眼睛和大腦在理解灰色像素所包含的信息時(shí)，會(huì)將它轉(zhuǎn)換為字型的輪廓栓撞，這就讓我們可以獲得與原始設(shè)計(jì)極為接近的渲染效果遍膜。
類似的效果出現(xiàn)在當(dāng)我們離報(bào)紙上糟糕的圖片保持足夠遠(yuǎn)的距離時(shí)（Chuck Close藝術(shù)）。最近瓤湘，Gary Andrew Clarke就在他的「Art Remixed」系列作品中將這一原理運(yùn)用到了極致捌归。
亞像素渲染（Subpixel rendering）
第三代渲染技術(shù)的特點(diǎn)是加入了顏色信息，如果我們把屏幕截圖不斷放大岭粤，可以看到字體邊緣有紅藍(lán)兩色出現(xiàn)，這就是亞像素渲染了特笋。
在LCD屏中剃浇，一個(gè)像素是由紅綠藍(lán)三個(gè)緊密排列的亞像素構(gòu)成的巾兆，它們決定了這一像素的顏色和亮度。由于它們是如此之小虎囚，以至于肉眼不會(huì)把它們看作是一個(gè)個(gè)獨(dú)立的色點(diǎn)角塑。如果我們仔細(xì)看看上圖中被白點(diǎn)標(biāo)記的「紅色」像素，就可以發(fā)現(xiàn)它所采用的渲染策略：所有的亞像素都可以單獨(dú)控制開或關(guān)的淘讥；若「空白」像素最右側(cè)的亞像素是紅色的話圃伶，則此像素都將填滿紅色。
如果我們需要降低圖片的飽和度蒲列，采用該技術(shù)的好處就顯而易見了窒朋。相比于單純的灰度渲染，水平方向的分辨率是其三倍蝗岖。垂直方向的位置和粗細(xì)也更加的精確侥猩，文本也呈現(xiàn)得更加清晰。
當(dāng)前的應(yīng)用情況
瀏覽器中文本的顯示完全依賴于系統(tǒng)的渲染技術(shù)抵赢，因此當(dāng)我們討論Web字體渲染時(shí)欺劳，關(guān)鍵還是操作系統(tǒng)所采用的渲染技術(shù)。然而铅鲤，由于每個(gè)瀏覽器所采用的技術(shù)都不相同划提，字間距（kerning）、連字（ligatures）邢享、下劃線位置甚至它們的粗細(xì)都不一樣鹏往，因此我們無法在這些不同的瀏覽器中獲得完全相同的渲染 效果（即便是在同一個(gè)操作系統(tǒng)下）。
更蛋疼的是驼仪，在Windows下還可能采用兩種技術(shù)來渲染——GDI或者DirectWrite掸犬。
在我們探尋背后的細(xì)節(jié)之前，讓我們先了解一下每個(gè)瀏覽器所采用的渲染技術(shù)：
Windows
在Windows系統(tǒng)下绪爸，字體格式對(duì)其渲染效果有很顯著的影響湾碎，比如PostScript字體和TrueType字體之間就存在著巨大的差別。但這種差別并不是由瀏覽器所引起的奠货，只要底層的字體一樣介褥，我們就可以看到完全相同的渲染效果。
盡管這種方法并不十分可靠递惋，但從字體的命名中我們可以大致推斷該字體所采用的渲染技術(shù)柔滔，比如，EOT和.ttf格式一定是TrueType技術(shù)萍虽，反之.otf通常是PostScript技術(shù)睛廊。但是還有一中封裝的字體格式WOFF，它可以包含其中任意一種字體格式杉编。因此光看文件名是不可能清楚它所采用的渲染技術(shù)的超全。除了EOT和.ttf格式文件可以斷定是TrueType渲染技術(shù)外咆霜，其他文件格式所包含的是哪種字體都無法確定。因此在你購買字體時(shí)嘶朱，你最好對(duì)想要購買的字體做一番了解蛾坯。（@Ryekee: 我覺得這一句根本不用翻譯，中國還有人會(huì)買字體么疏遏？）
TrueType和PostScript的區(qū)別在于描繪曲線時(shí)所采用的數(shù)學(xué)方法不同脉课，但這一差異對(duì)柵格器并不會(huì)造成太大的影響，只有字型設(shè)計(jì)人員才需要考慮著兩者的差別财异。另一個(gè)重要的區(qū)別就是所采用的字體微調(diào)的方法倘零。PostScript只包含了組成字體的各種元素的抽象位置信息，而TrueType則包含了非常詳細(xì)的底層命令宝当，直接接管了渲染的進(jìn)程视事。然而造成兩種渲染技術(shù)的差異并不是它們的設(shè)計(jì)理念上的差別，而是源于Micro$oft采對(duì)TrueType采用了新的渲染引擎庆揩。
Windows: TrueType字體
在Windows XP中俐东，許多瀏覽器都是采用灰度渲染來渲染文本的。盡管效果比不上Mac OS所采用的亞像素渲染订晌，但字體在大尺寸下的效果依舊出眾虏辫，字體的邊緣很平滑。
ClearType渲染技術(shù)是Micro$oft對(duì)亞像素渲染的「借鑒」锈拨。它最早供GDI使用——經(jīng)典的Windows API砌庄。盡管從Windows XP系統(tǒng)開始就可以使用該技術(shù)，但是所有的瀏覽器都并沒有采用該技術(shù)奕枢。在Windows 7和Vista中娄昆，ClearType是默認(rèn)開啟的，從而使得其成為了應(yīng)用最廣泛的渲染技術(shù)（如果算上所有的互聯(lián)網(wǎng)用戶的話）缝彬。但需要注意的是萌焰，ClearType只適用于TrueType類Web字體，并不適用于PostScript類字體谷浅。
奇怪的是扒俯，Micro$oft吸納了水平方向上亞像素渲染技術(shù)的優(yōu)點(diǎn)，卻全然拋棄了垂直方向上平滑度的改進(jìn)一疯。因此ClearType實(shí)際上是亞像素渲染和黑白渲染的雜交撼玄，結(jié)果使得字體在輪廓線上出現(xiàn)了鋸齒，在大尺寸字體下更扎眼墩邀。即便是最精細(xì)的字體微調(diào)也無法消除曲線上難看的鋸齒掌猛。
對(duì)于大尺寸的字體，ClearType表現(xiàn)得十分糟糕眉睹，水平方向上精確度帶來的好處非但并不明顯荔茬，粗糙的輪廓甚至毀了整體的渲染效果只盹，技術(shù)仿佛退回了解放前。
至少對(duì)Windows字體渲染技術(shù)來說兔院，未來是光明的。在GDI的接班人DirectWrite中站削，Micro$oft為ClearType增加了垂直方向上的平滑度坊萝。新的渲染模型（目前應(yīng)用于IE9）在所有尺寸下都提供了平滑而精確的渲染效果。與Mac OS不同的是许起，Micro$oft仍試圖將輪廓與全像素高度（full pixel heights）對(duì)齊十偶，如果字體微調(diào)得當(dāng)?shù)脑挘伺e將可以獲得更好的渲染效果园细。更牛逼的是惦积，DirectWrite可以進(jìn)行亞像素定位（subpixel positioning），讓字符間的間隙與設(shè)計(jì)的完全相同猛频，還改善了字體紋理的勻稱度狮崩。
Windows: PostScript字體
在使用GDI渲染模式的瀏覽器中，PostScript類型的字體是通過灰度渲染呈現(xiàn)的鹿寻。不同于流行的GDI-ClearType渲染模式睦柴，這種渲染模式可以使得字體輪廓更加平滑；與TrueType字體微調(diào)不同毡熏，PostScript字體微調(diào)更為簡單坦敌，甚至可以自動(dòng)完成。
DirectWrite不僅可以使字體的邊緣更加平滑痢法，它也可以運(yùn)用亞像素渲染技術(shù)來渲染PostScript類字體狱窘。但與TrueType渲染不同的是，為了能夠更加真實(shí)的反應(yīng)筆畫的粗細(xì)财搁，它使用了更多的灰色像素蘸炸。經(jīng)過優(yōu)化的渲染效果更加接近Mac OS的渲染了。
未來的某個(gè)時(shí)候（瀏覽器廠商并不會(huì)像我們期望的那樣快的采用新技術(shù)）妇拯，DirectWrite將取代Windows過時(shí)的渲染技術(shù)幻馁，到那時(shí)我們就不必再糾結(jié)于選擇TrueType類字體還是PostScript類字體了。
Windows: 無微調(diào)字體
在Windows老式的灰度渲染模式下越锈，無微調(diào)字體的渲染效果出奇的好仗嗦。因?yàn)樽煮w并沒有通過微調(diào)與全像素對(duì)齊，柵格器也沒有對(duì)其進(jìn)行強(qiáng)制處理甘凭，其效果很接近iOS上的字體渲染稀拐。遺憾的是，目前來看丹弱，無微調(diào)字體還不適合使用德撬，我們可以看看下圖：
在許多有關(guān)Web字體渲染的討論文章中都指出铲咨，GDI-ClearType極度依賴良好的字體微調(diào)。水平方向上的筆畫需要通過微調(diào)來精確定義蜓洪，否則筆畫的粗細(xì)可能會(huì)不恰當(dāng)纤勒。在大尺寸字體下，微調(diào)也極為重要隆檀。無微調(diào)字體在輪廓線在沒有對(duì)齊像素網(wǎng)格的地方會(huì)出現(xiàn)一些「疤」摇天，正如上圖所示。
在DirectWrite模式下恐仑，無微調(diào)的PostScript和TrueType兩種Web字體的渲染效果幾乎完全相同泉坐。這兩種格式的文本字體仍需要良好的微調(diào)才可以保證筆畫的清晰度和一致性。屏幕顯示的字體可能可以僥幸避免無微調(diào)帶來的不良效果裳仆，因?yàn)樵诖蟪叽缦峦笕茫⒄{(diào)與否區(qū)別并不大。
Mac OS X
在Mac OS中歧斟，所有的瀏覽器都使用Quartz渲染引擎纯丸。TrueType和PostScript字體采用完全一樣的渲染方式，所以字體微調(diào)可以完全無視了臥槽构捡，這正是兩種字體的核心區(qū)別耙耗稀！所以Mac OS的亞像素渲染簡直是屌爆了勾徽，我們可以放一百萬個(gè)心滑凉。柵格器不會(huì)試圖解讀構(gòu)成字體的筆畫和特征，因?yàn)樗袞|西都可以通過暗像素來呈現(xiàn)喘帚。字體形狀不會(huì)被解讀畅姊，因此也就不會(huì)被曲解。Quartz渲染引擎十分可靠吹由，因?yàn)樗粫?huì)自作聰明瞎搞瞎弄若未。另外，Apple?似乎也會(huì)采用一些很美妙的智能方案去增強(qiáng)渲染效果倾鲫，但是這種技術(shù)沒有說明文檔粗合，也完全超出我們的控制范圍。
不過在某些情況下乌昔，這種技術(shù)也會(huì)導(dǎo)致一些不理想的效果隙疚。比如在上圖所示的例子中，由于大「T」的高度不是全像素值磕道，而Mac OS不會(huì)強(qiáng)制字母對(duì)齊供屉，因此在字母的頂端會(huì)有一條灰線。可惜這個(gè)蛋疼的情況不是設(shè)計(jì)者所能改變的伶丐。不過悼做，這種模糊的現(xiàn)象只有在特定的字號(hào)下才會(huì)出現(xiàn)，因此一般只需要改一改字號(hào)就可以解決這一問題哗魂。體會(huì)一下修改字號(hào)帶來的陣痛肛走，我們就可以獲得一個(gè)非常棒的渲染效果啦。
在Mac上另一個(gè)比較蛋疼的是录别，字體會(huì)渲染得更重一些羹与。在文本字體的大小下會(huì)更明顯，同樣地字體在Mac OS下會(huì)「黏乎」一些庶灿，而在Windows下則比較清淡。
iOS
iOS上的渲染遵循與Mac OS一樣的原理吃衅，兩者主要的區(qū)別就是iOS不采用亞像素渲染往踢。主要的原因就是當(dāng)設(shè)備旋轉(zhuǎn)之后，系統(tǒng)需要重新計(jì)算并更新渲染徘层，因?yàn)閬喯袼氐呐帕蟹较虬l(fā)生了變化峻呕。Apple竭盡全力想要減少CPU的使用。
結(jié)論
網(wǎng)站訪客所使用的瀏覽器和操作系統(tǒng)差異很大趣效，有些是沒有及時(shí)更新瘦癌，有些是公司的政策所規(guī)定，不是用戶的錯(cuò)跷敬。我個(gè)人的建議是盡可能的為用戶提供最佳的渲染效果讯私，而不是指責(zé)操作系統(tǒng)廠商，或者要求用戶更換更好的操作系統(tǒng)（@Ryekee：比如Mac OS西傀？:-P）斤寇。
在Mac OS和iOS上，我們對(duì)渲染沒有控制權(quán)拥褂，但這完全可以接受娘锁，因?yàn)殇秩疽婧喼碧袅恕３俗煮w渲染得太過黏乎之外饺鹃∧眩或許有一天，Web字體服務(wù)可以根據(jù)不同的平臺(tái)提供稍濃或稍淡的字體來改善字體的一致性悔详。
在Windows上镊屎，字體微調(diào)極為重要，尤其是對(duì)TrueType類字體而言（這是萬惡的IE6到IE8唯一接受的Web字體格式）伟端。除此之外杯道，選擇TrueType還是PostScript字體格式也會(huì)對(duì)渲染的結(jié)果造成重大的影響。除了小號(hào)字體的微調(diào)外，PostScript的渲染效果完全不遜色于TrueType党巾。盡管 DirectWrite為Windows提供了令人身心愉快的渲染效果萎庭，但是良好的字體微調(diào)依舊很重要。
實(shí)際應(yīng)用：改善屏顯字體的渲染效果
一些Web字體的提供商齿拂，比如Typekit和Just Another Foundry驳规，已經(jīng)開始提供PostScript類字體了。
在IE6到IE8中署海，GDI ClearType渲染效果的鋸齒無法避免吗购，但在其他環(huán)境下都可以得到平滑的渲染效果。這就意味著我們還是需要使用帶有微調(diào)的TrueType字體砸狞，因?yàn)椴俚暗腎E6 – 8還是有著巨大的市場份額捻勉。
Typekit也開始采用混合策略刀森，提供PostScript格式的屏顯字體踱启，為Windows GDI提供更平滑的渲染效果。但這需要為制定一些視覺效果的評(píng)判標(biāo)準(zhǔn)研底。
你們可能會(huì)問我埠偿，「你大爺?shù)木烤挂绾味x屏顯字體（display font）啊榜晦？」
事實(shí)上確實(shí)很難畫一條清晰的線來定義屏顯字體冠蒋。有些字體供應(yīng)商提供人工微調(diào)的TrueType字體，用作正文顯示非常不錯(cuò)（可惜的是轉(zhuǎn)換成PostScript格式可能會(huì)丟失微調(diào)信息）乾胶。一些文本字體在大尺寸的情況下表現(xiàn)也相當(dāng)不俗抖剿，因此理想的情況是同一字體提供兩套不同的格式。不過這會(huì)增加UI以及后端的復(fù)雜度识窿，目前來看并不現(xiàn)實(shí)牙躺。
未來發(fā)展
越來越多的字體設(shè)計(jì)師都開始注意到Web字體所帶來的技術(shù)問題，尤其是TrueType字體的微調(diào)腕扶。隨著Web字體產(chǎn)業(yè)的崛起孽拷，他們?cè)敢飧冻鼍槠聊伙@示而優(yōu)化字體。在不遠(yuǎn)的將來半抱，我們將看到大量精心設(shè)計(jì)的字體問世（或者至少是對(duì)現(xiàn)有字體的更新）脓恕。
隨著屏幕分辨率的增加（以及對(duì)柵格器的重大改進(jìn)），我們慢慢地不再擔(dān)心字體渲染的技術(shù)細(xì)節(jié)窿侈。采用GDI渲染模式的瀏覽器必將拖后腿炼幔，正因?yàn)榇耍磥頂?shù)年內(nèi)史简，我們都還無法放心的使用無微調(diào)的TrueType字體乃秀。只有當(dāng)這一類瀏覽器用戶比例降到足夠低的程度的時(shí)候，TrueType字體微調(diào)（耗時(shí)又需要高超的技巧）才可以被扔到一邊。盡管目前市面上幾乎所有Web字體都是TrueType格式的跺讯，我仍希望字體行業(yè)能夠大規(guī)模轉(zhuǎn)向PostScript格式枢贿，因?yàn)檫@種字體能為設(shè)計(jì)師減少絕大部分的工作。
相關(guān)資源
《Firefox6 中的 DirectWrite 字體渲染》
刀脏，Mozilla官方博客
局荚，Just Another Foundry
，Typekit 官方博客
《OpenType/CFF 相對(duì)于 TrueType 的優(yōu)勢(shì)》
愈污，Typblography
