轉載：http://blog.jobbole.com/50061/
在Mac OS系統上對網頁截屏，然後打開圖片不斷放大觀察。你會發現黑色的文字居然不完全是純黑色的！（Windows 7下IE9使用微軟雅黑字體也可以看到這個現象）。腫麼回事，這不科學！讀完這篇文章後你就都懂了。
爲什麼相同的字體，在Mac OS上的顯示效果「看起來」要比Windows上好看？這個問題我一直沒有搞清楚，昨天偶爾看到有關字體渲染方面的一篇文章：《A Closer Look At Font Rendering》，終於對字體渲染有了一些認識。這篇文章是我對字體渲染知識的歸納總結，只挑重點寫。
一個理想和三種實現（渲染策略，Rendering Strategies）
理想的形狀
理想中的文字，指的是使用矢量圖形描述出來的形狀。矢量圖形是在計算機圖形學中使用數學方程表達的幾何形狀（點、線和多邊形等）來繪製圖像。這樣抽象的描述可能比較難懂，可以理解爲矢量圖形是「e這個字母的形狀是數字9翻轉過來的圖形」這種描述的數學版。
如何將這種抽象形狀描述轉化爲展示在顯示器上字體呢？這需要引入一個新的術語——柵格化（Rasterization），柵格化指的是將理想中的形狀轉化爲一個一個像素的這個過程。我們的顯示器、手機屏幕實際上都是有無數個發光的像素點構成的，它們在單位面積排列得越密集顯示效果越精細（PPI，像素密度）。你可能已經注意到，理想形狀示意圖裏的字母e並不能和灰色的網格（可以理解爲像素點）對應起來，尤其是曲線的邊緣，只佔了網格的一部分。由於我們所能控制的最小單位就是像素，便造成了理想和現實間的差距，如何讓以像素爲基礎的屏幕更好的表達我們理想中的文字形狀，牛X的前輩們發明了三種字體渲染策略，後面一一道來。
初代：黑白渲染（black-and-white rendering）
黑白渲染是最早人們使用的渲染技術，這種渲染方式只使用黑白兩種顏色來表達文字的形狀。還記得Windows的藍天白雲界面上的文字顯示效果嗎？還有Dos和PC機器啓動時候的提示文字，都使用了這種渲染方法。在顯示屏幕上，少量的像素點並不能很好地傳達字體微妙的形狀變化，在圓的邊緣輪廓上我們就會發現鋸齒。這時字體渲染技術還處在初級階段。
二代：灰度渲染（Grayscale rendering）
在上世紀90年代中期，我們的前輩們開始使用一種非常巧妙的方法，可以說是黑白渲染的優化版。灰度渲染可以控制每個像素的明暗，讓字形邊界看起來過渡平滑。處於字形邊界上的像素亮度取決於自身被理想形狀所覆蓋的面積比值。這樣，字體輪廓看起來就更平滑，字體設計的細節也得以再現。字體在屏幕上看起不僅清晰——而且還能體現字體本身特徵及風格。我們人眼和大腦在解讀灰色像素中信息時，將它轉換爲了形狀的輪廓，因此我們感覺這樣渲染後的效果更加接近原始的形狀。
三代：亞像素渲染（Subpixel rendering）
隆重介紹 亞像素渲染，第三代渲染技術，它一個重要特徵是引入彩色像素。如果我們將屏幕截屏放大，發現字體邊緣呈紅色和藍色，那麼我們就可以知道它採用的是亞像素渲染技術。 有趣的是，這一渲染技術和顯示技術的發展是息息相關的，在液晶顯示屏（LCD）上，一個像素是由紅、綠、藍三個子（亞）像素構成的，LCD能夠做到單獨控制每一個子像素的開關。LCD屏幕像素在顯微鏡下的樣子：
因爲這些子像素非常小，以至於人眼無法察覺到他們是一個個獨立的顏色點。與單純的灰度渲染相比，水平方向的分辨率翻了三倍。豎筆的位置及粗細就可表現的更爲精確，文本外觀也就更爲清晰。
通過觀察，我還發現亞像素渲染總是把暖色放在左邊（如上圖的紅），冷色（如上圖的藍）放在右邊，據我自己的猜想這很有可能與從左向右的閱讀順序有關。這樣的設計從視覺上會感受到光源是從左邊進入，增加字體的立體感，讓閱讀更加舒適。（這僅僅是我個人的猜測，如何有人能從色彩原理上解釋這一點，請一定要告訴我）
下面圖片是我在Mac OS上的Finder側邊欄截圖放大，仔細觀察文字後半部分能體現出這種微妙的感覺：
在各種操作系統中的應用情況
瞭解完了三種字體渲染策略，我們來看一下各種操作系統對渲染方式的選擇。
Windows系統
在Windows系統下，使用什麼渲染技術取決於使用什麼樣的字體，以及應用程序的設置。Windows系統有兩套圖形文字渲染接口，一個是GDI，另一個是Windows Vista之後推出的DirectWrite，用於取代老的GDI。嚴格來說，微軟自己的亞像素渲染技術有另一個名字——ClearType，這個技術與兩套圖形文字渲染接口是被包含的關係。
ClearType在微軟自家系統和程序中支持情況如下：
Windows XP (off by default)
Windows Vista (on by default)
Windows 7 (on by default)
Microsoft Office 2007 and later (on by default)
Internet Explorer 7 and later (on by default)
Windows Live Messenger (on by default)
字體渲染策略與瀏覽器和字體格式的關係：
PS-webfonts指的是PostScript字體，TrueType 和 PostScript 區別在於在描繪曲線時所有的數學方法不一樣，只有字體設計人員才需要了解兩者的區別。感興趣想要深入瞭解可以自己Google資料學習。
Windows系統爲了兼容性，提供了大量的選擇權給應用程序和系統，最終的結果是在Windows系統上的文字閱讀體驗不夠統一，有的地方看上去不錯，有的卻無法直視。這和Windows系統整體的生態環境是息息相關的，它需要支持各種各樣的屏幕和分辨率，再加上我們之前提到的亞像素渲染技術是和LCD液晶屏幕的物理屬相息息相關的一項技術，不同的LCD像素排布都需要做相應的適配，加大微軟完善這一體驗的成本。
Mac OS 系統
在Mac OS系統上，所有瀏覽器使用的是Quartz渲染引擎，這個引擎據說非常可靠。TrueType和PostScript字體都是以同樣的方式渲染的，也就是使用了亞像素渲染技術，渲染提示（hinting）被故意忽略了，而這正是兩類字體在概念上最大的差別，Mac OS對PS和TrueType字體同等對待，不管它們那些不一樣的特性。Mac OS的字體渲染技術不會試圖理解構成字體的筆畫及特徵。字母形狀不會解讀，因而也就不會出現曲解的情況。另外蘋果似乎也會應用一些精妙的自動化措施增強渲染效果，但是這類自增強的技術沒有文檔說明，我們無從得知這背後的細節。在Mac 上另外碰到的一個難以控制的現象是，字體會渲染的更重些。在文本字體大小下，這點差異尤其明顯。同樣的字體在Mac OS上看起來有點濃稠，而在Windows上則看起要清淡些。
Mac OS系統只運行在自己的Mac上，Apple在字體渲染方面更容易給用戶一個統一的體驗，再一次體現了軟硬結合的優勢。
總結
「Mac上字體看着比Windows好看」其實是幾年前Windows XP時代的刻板映像。 應該來說，在不同操作系統上，字體渲染技術的區別正在縮小，隨着微軟DirectWirte的普及，Windows和Mac OS在字體渲染方面的區別僅在於他們對字體顯示的理解和偏好。Joel Spolsky 的 《Font smoothing, anti-aliasing, and sub-pixel rendering》 一文解釋了兩者的區別。
蘋果總體上認爲，（字體渲染）算法的目標應儘可能還原字體的設計，即使代價是造成些許模糊。
微軟認爲，字符的形狀應和像素契合，以防止模糊，提高可讀性，即便扭曲了字體的構造。
更令人驚歎的是，針對LCD優化的Subpixel rendering技術，居然在1977年的Apple II 的圖形顯示中就已經被髮明瞭，比微軟宣佈ClearType技術整整早了22年。Steve Wozniak，Apple II的設計師和這項專利的擁有者對究竟是誰先發明瞭這項技術的回覆如下：
“Back in 1976, my design of the Apple II’s high resolution graphics system utilized a characteristic of the NTSC color video signal (called the ‘color subcarrier’) that creates a left to right horizontal distribution of available colors. By coincidence, this is exactly analogous to the R-G-B distribution of colored sub-pixels used by modern LCD display panels. So more than twenty years ago, Apple II graphics programmers were using this ‘sub-pixel’ technology to effectively increase the horizontal resolution of their Apple II displays.”
具體的爭論細節可以八卦 Sub-Pixel Font Rendering Technology – Who Di It First。
雖然當時這項技術是運用在NTSC信號上的，但技術的思路都是一致的。喬幫主當時是有一個多牛X的技術團隊呀，對幫主的敬畏有多出了幾分！
最後，給大家留個懸念，在iPhone或者安卓手機上找一個網頁打開截屏，圖片拿到電腦上不斷放大後，你會發現手機上的字體渲染並沒有使用亞像素渲染，這是爲什麼呢？^_^ 答案留給你去尋找吧。