來源：21haolou
兩年前掀起的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