兩年前掀起的Web字體革命讓眾人遺忘多年的字體渲染話題再次浮現。Web字體賦予我們自由的同時也帶來新的挑戰。字體選擇及使用並不僅僅只是風格問題，其背後的技術實現也值關註。

我們沒辦法控制網站訪客所用的瀏覽器與操作系統，因此理解字體渲染原理有助於確保網站在各類情況下都適宜閱讀。截至最近，我們手頭可用的“web安全”字體仍屈指可數。雖然安全字體的種類非常少，但這些字體都是針對顯示屏精心制作和調整過了的，因此在字體顯示效果方面不用太擔心。

如今，在選擇網站字體方面我們已有極大的靈活性，然而將設計圖轉換成實際像素的過程並不流暢自然，操作系統廠商在字體渲染上采取不同的策略，而且還在隨時間劇烈的演變中。隨著對屏幕上字體的深入了解，我們會發現，這些字形（glyphs）的渲染會因操作系統和字體格式而存在明顯差異。另外，如果字體缺少關鍵的要素——字體微調（hinting），一款設計優秀的字體在Windows操作系統下可能非常難看。

本文介紹了字體渲染的原理，字體渲染技術的形成，以及各類操作系統和瀏覽器所采用的渲染技術及原因，這樣當你需要為下個項目選擇字體的時候，你就清楚需要註意哪些細節才可確保高質量排印效果。

渲染策略

理想的形狀（左）,黑白渲染（中）及灰度渲染（右）

柵格化（Rasterization）

數字形態下，字符是用抽象化的圖案繪制成的。當文本顯示在屏幕上時，位置非常精確，理想的字體形狀需要用一定數量的像素柵格顯示。隨著屏幕從單純的打印輸出預覽設備變成實際的閱讀載體，工業界開發出了越來復雜且先進的字體渲染方法，確保屏顯字體易於閱讀。

黑白渲染

最早人們是用黑白像素來顯示字符形狀，有時這種方法也被稱為二值渲染（bi-level rendering）。目前打印機就仍在使用這種方法，由於打印機的高輸出分辨率，打印的結果能很好地再現原圖。但是在屏幕上，有限的像素無法很好地傳遞字體形狀的微妙之處。雖然我們無法分辨單個像素，但是肉眼仍可覺察到弧形輪廓線上的毛刺。

灰度渲染

在上世紀90年代中期，操作系統開始采用非常巧妙的手段。盡管屏幕的分辨率非常低，但是操作系統可以控制每個像素的明暗。這就可以在柵格化圖像中存儲更多信息。

在灰度渲染模式下，處於字形邊界上的像素變成灰色。該像素亮度取決於自身被理想字體形狀所覆蓋的面積比值所決定。這樣，字體輪廓看起來就更平滑，字體設計的細節也得以再現。字體在屏幕上看起不僅清晰——而且還能體現字體本身特征及風格。

這種被稱為抗鋸齒的原理與圖片從高分辨率轉換成低分辨率時所用的重采樣（resampled）原理是相同的。我們的眼睛和大腦可以解讀灰色像素中的信息，並補充到原先銳利的字體輪廓中，因此，我們感覺到的字體形狀與初始的形狀就很接近。如果我們把報紙拿遠點，報紙上印刷品質相對糟糕的圖片著色看起來也會不錯，這背後的原理是類似的。最近，加裏·安德魯·克拉克（Gary Andrew Clarke）在Art Remixed系列作品中就把這一原理運用到了極致。

次像素渲染

彩色像素增加了分辨率

第三代渲染技術的一個重要特征是引入彩色像素。如果我們將屏幕截屏放大，發現字體邊緣呈紅色和藍色，那麽我們便可斷言它采用的是次像素渲染技術。

在LCD屏上，用來控制像素顏色和亮度的紅、綠和藍色次像素緊密排列。當次像素非常小時，我們不會把次像素視為單獨的色點。我們對上圖白點標註的“紅色”像素近距離觀察就會發現它采用的策略：所有次像素都可單獨控制開與關。如果“空白”像素最右邊的次像素是紅色次像素，則其對應的像素點從技術上講就是紅色的。

LCD屏幕上的次像素渲染

如果我們需要降低圖片色彩的飽和度，采用該技術的好處就顯而易見。與單純的灰度渲染相比，水平方向的分辨率翻了三倍。豎筆（vertical stems）的位置及粗細就可表現的更為精確，文本外觀也就更為清晰。

目前渲染技術的應用情況

在顯示文本時，幾乎所有的瀏覽器都依賴操作系統的字體柵格器，在關註Web字體渲染時，我們需要留意的一個關鍵差異就是操作系統。不過，瀏覽器對字距調整（kerning）、連字（ligatures），以及下劃線位置和厚度等方面的支持也存在不同，因此我們不可奢望所有瀏覽器（甚至是同一平臺上的）都可獲得完全一致的渲染效果。另外在Windows平臺上，瀏覽器可以使用系統默認的技術——GDI技術渲染字體，也可使用DirectWrite技術渲染字體。

在深入了解渲染技術細節之前，我們首先了解下各渲染技術在瀏覽器上大致的運用情況：

各Windows瀏覽器所使用的渲染模式。

WINDOWS

在windows平臺上，字體格式對渲染有重大影響。PostScript字體和TrueType字體之間就存在明顯差別。這種差別並不是指兩類字體引入瀏覽器的方式。只要底層的字體格式一樣，我們看到的渲染效果就會相同。

盡管我們最好不要完全依賴命名規則來判斷字體底層所用的渲染技術，但字體的文件格式還是可以給我們提供了一些線索。比如EOT和.tff文件一定是TrueType字體，而.otf文件通常是PostScript字體。但是還有一種封裝類型的字體格式WOFF，它可包含其中任意一種字體格式。因此光看文件名的話，我們還不清楚它包含何種字體，因此也就不清出它可能采用的渲染技術。除了EOT或.ttf文件必然是TrueType字體外，其他文件格式包含的是何種字體還無法完全確定。因此在購買字體時，你最好對所購買的字體做進一步研究。

TrueType 和 PostScript 區別在於在描繪曲線時所有的數學方法不一樣——光柵器（rasterizers）對這點沒做過多關註。只有需要編輯字形的時，字體設計人員才會覺察到兩者的區別。另一個更重要的區別是所采用的字體微調方法。PostScript 字體包含字母組成的各類要素的位置抽象信息，而TrueType字體則包含了詳細的底層指令，直接控制渲染過程。然而兩種渲染方式的實際差異並不在於概念上的區別，而是源自微軟只對TrueType字體應用新渲染引擎的決定。

WINDOWS: TrueType 字體

Windows 灰度模式下的TrueType字體渲染效果

在Windows XP 上，許多瀏覽器采用灰度模式渲染文本的。盡管渲染效果比不上Mac OS采用的次像素渲染技術，但字母在大尺寸下效果不錯，邊緣很平滑。

Windows GDI ClearType模式下的TrueType字體渲染

ClearType是微軟對次像素渲染技術的一次借鑒。它最先供GDI使用，GDI是經典的Window應用程序接口（API）。盡管在Window XP平臺上已可以使用，但是所有瀏覽器並未使用該技術。在Windows 7和Vista中，ClearTyep才默認開啟，從而成為使用最為廣泛的渲染技術（如果我們把所有的互聯網用戶算在內）。不過需要註意的是，這項渲染技術只運用在TrueType類的Web字體上——GDI-ClearType技術沒運用在PostScript字體上。

這項渲染技術有一個很奇怪的地方，微軟水平方向上吸取了次像素渲染技術的優點，但是卻徹底放棄了對字體垂直方向上平滑度的改進。因此ClearType實際上是次像素和黑白渲軟技術的混合。結果字體輪廓線上出現鋸齒，在大尺寸下，這點尤其明顯。曲線頂部和底部的鋸齒看起來非常不舒服，但是無法避免——即便是最好的字體微調也無法讓其消失

對於大尺寸的字體，ClearType在渲染質量是一種退步。水平方向上精確度帶來的好處並不明顯，而粗糙的渲染輪廓卻毀了整體的效果。

DirectWrite模式下的TrueType字體渲染。

未來是光明的，至少對於Windows字體的渲染而言是這樣的。在GDI技術的繼任者DirectWrite中，微軟為ClearType增加了垂直方向上平滑度。新的渲染模式（目前IE9在使用）在所有尺寸下都可提供平滑而精確的渲染。它與Mac OS的主要區別是Windows的DirectWrite仍試圖將輪廓與全像素高度（full pixel heights）對齊。字體微調得當的話，此舉可以獲得更好的渲染效果。另外，DirectWrite可以進行次像素定位（subpixel positioning），從而使得字符間的間隙與設計的完全一致，另外該技術改善了字體紋理總體的勻稱度。

WINDOWS: PostScript 字體

GDI灰度模式下PostScript字體渲染。

在使用GDI渲染的瀏覽器中，PostScript類型的Web字體是通過灰度渲染顯示的。不同於流行的GDI-ClearType模式，這種渲染模式使得字體輪廓平滑過度。與TrueType字體的微調不同，PostScript字體的微調要簡單，甚至可以自動完成。

DIrectWrite模式下的PostScript字體渲染。

DirectWrite不僅可以讓輪廓更為平滑，它也使用次像素渲染技術渲染Postcript字體。不過與TrueType字體渲染還是有些不一樣，為了更能真實的反映筆畫粗細。它使用了更多的灰色像素。該技術做了相當多的權衡，非常接近Mac OS的渲染效果。

未來某個時候（瀏覽器廠商及用戶采用新技術的速度不會如我們期望的那樣快），DirectWrite將取代Windows陳舊的渲染方式，我們不用在糾結於是選擇TrueType的Web字體還是選擇PostScript的web字體。

WINDOWS: 未微調字體

灰度模式下的未微調字體。

在Windows老式的灰度模式下，完全未做微調的字體效果出奇的好。因為字體未通過微調使自身與全像素“對齊”，另外柵格器也未作強制處理，其效果很接近iOS上的字體渲染。遺憾的是，目前來看未微調字體不宜使用。見下圖

GDI-ClearType渲染的未微調TrueType字體。

有關Web字體渲染質量的諸多討論中就提到過，GDI-ClrearType極度依賴良好的微調。水平方向上的筆畫需要通過微調精確定義，不然筆畫的寬度可能會恰當。在大尺寸情況下，微調也極為重要。未微調字體在輪廓線未正確對齊像素網格的地方會突出一些“結疤”出來，上面例子就可以看到這點。

DirectWrite模式下的未微調字體渲染。

在DirectWrite模式下，未微調的PostScript和TrueType這兩種Web字體的渲染效果幾乎完全相同。這兩種格式的文本字體仍需要良好的微調才可確保筆畫的清晰和一致性。屏顯字體甚至可以僥幸避免未微調的不良後果，因為在大尺寸下，微調與否區別不大。

MAC OS X

OS X上的字體渲染

在Mac OS系統上，所有瀏覽器使用的是Quartz渲染引擎。TrueType和PostScript字體都是以同樣的方式渲染的，因此字體微調（hinting）被忽略了，而這正是兩類字體在概念上最大的差別。Mac OS的次像素渲染技術非常牢靠，因此這是我們最不用擔心的一個平臺。柵格器不會試圖理解構成字體的筆畫及特征。因為萬物都可用暗像素來呈現。字母形狀不會解讀，因而也就不會出現曲解的情況來。Quartz渲染引擎非常可靠，因為它不擅作主張。另外蘋果似乎也會應用一些精妙的自動化措施增強渲染效果，但是這類自增強的技術沒有文檔說明，也完全超出我們的控制。

不過在某些情況下，這類技術也會導致一些不理想的效果。比如在上面的這個例子中，大號的“T”因為其理論的高度不是全像素值，因此在字母頂部有一行模糊的灰線。而且Mac OS也不會強迫字母對齊。這點不受字體創作者控制。不過，這類模糊只會在特定的字體大小下才會發生。因此一般只需選擇稍不同的字體大小即避免此問題。稍微試錯後，我們便可找到看起來舒服而又清晰的字體大小。

在Mac 上另外碰到的一個難以控制的現象是，字體會渲染的更重些。在文本字體大小下，這點差異尤其明顯。同樣的字體在Mac OS上看起來有點濃稠，而在Windows上則看起要清淡些。

iOS

iOS中的字體渲染

iOS上的字體渲染遵循與Mac OS 一樣的原理——兩者之間的主要區別就是iOS目前尚未運用次像素渲染技術。原因可能是當設備旋轉後，系統需要重新運算並渲染結果。因為次像素的排列方向發生變化了，另外蘋果想盡可能較少CPU的使用。

結論

網站訪客所用的操作系統及瀏覽器差異很大。有些是因為沒及時更新，有些是因公司規定導致的，不是用戶的錯。我個人的意見是應該盡可能的給用戶呈現最佳渲染效果，而不是指責操作系統廠商，或是要求用戶換成更好的系統。

在Mac OS和iOS上我們對渲染很難有任何控制權，但這可以接受，因為一般情況下渲染引擎非常可靠。不過有一個問題就是字體渲染的太過濃稠。或許有一天，Web字體服務可以根據不同的平臺提供稍濃或者稍淡的字體來改善字體的一致性。

在Windows上，微調極為重要，尤其是對TrueType字體而言（這是IE6-IE8唯一接受的Web字體格式）。除此之外，選擇TrueType還是選擇PostScript字體格式也會對渲染結果產生重大影響。除了小號微調字體外，PostScript格式在渲染效果方面不遜於甚至由於TrueType格式，另外字體的制作過程也要簡單。盡管DirectWrite讓Windows上的字體渲染效果更加愉悅，但是提供微調良好的字體仍有必要。

實際應用：改善屏顯字體的渲染效果

一些Web字體提供商（比如Typekit和Just Another Foundry）已經開始提供PostScript格式的屏顯字體。

不同渲染環境下的JAF Domus Titling字體

在IE6至IE8中，GDI CleartType的鋸齒無法避免，其他環境下GDI ClearType可以得到平滑的渲染效果。IE6-IE8瀏覽器的市場份額仍然很大，目前還不適合提供不無法清晰渲染的字體，這意味著我們仍需要良好微調的字體，

Typekit上Underware設計室設計的Bello字體就是PostScript格式的Web字體（右），它比左邊的TrueType字體輪廓要順滑些。

Typekit開始采用混合策略，提供PostScript格式的屏顯字體，以便在Windows GDI模式下獲得更為順滑的渲染效果。但是這需要對字體視覺效果制定一些評判依據。

“如何定義屏顯字體？”你可能會問，實際上的確很難畫出一條清晰的界線來定義屏顯字體。一些字體制作商提供手工微調的高品質TrueType字體，用做正文文本字體也很不錯（可惜的是在轉換成PostScript字體後它會丟失微調信息）。一些文本字體很有可能在大尺寸的情況下使用。因此理想的情況是同一字體提供兩套不同的格式。不過這會增加用戶界面（和後端）的復雜度，目前還不適合采取這種方式。

未來的發展

越來越多的字體設計師開始留意使用Web字體所帶來技術疑難問題，尤其是TrueType的微調。隨著Web字體產業的增長，字體設計師會針對屏幕顯示的特點。采取一些措施優化字體。不久的將來，我們有望看到大量精心打造的新字體面世（至少是對現有字體的更新）。

隨著屏幕分辨率的增加（以及對柵格器的重大改進），我們慢慢地不用在擔心字體渲染的技術細節。采用GDI渲染模式的瀏覽器必將拖後腿（boat anchor），正因為這樣，我們未來幾年仍沒辦法大規模那些未作微調的TrueType字體。只有當這類瀏覽器用戶比重降到很小時，TrueType字體的微調處理（這個過程相當耗時，並且需要相當高的技巧）才不會那麽重要。盡管目前市面上的大多數Web字體都是TrueType格式，我仍希望字體行業能大規模轉換成PostScript字體，因為這種格式幾乎是所有字體設計師制作字體所用的原生格式（這種字體的制作要容易些）。

相關資源

●《FireFox 6中的DirectWrite文本渲染》 Mozilla 官方博客

●《JAF Domus Titling Web 字體》 Just Another Foundry

●《Typekit更新：改善Windows平臺上的字體渲染》Typekit網站博客

●《Open Type/CFF格式相對True Type格式的優勢》 Typblography

字體渲染詳解