Windows 和 MacOS 的中文抗鋸齒

1. 什麼是鋸齒

在顯示器上,由於解像度遠達不到印刷的解像度,而且點的排佈是方形的,所以遇到不是直線的情況時,就會在邊緣產生明顯的鋸齒,而最基本的抗鋸齒方法就是進行重新取樣,將邊緣的像素使用半色調來填充,如下圖左側的線可以看到明顯的鋸齒,而右側的線則平滑了許多。

font1

再看下圖,通常印刷的解像度可以在 300-500dpi,而顯示器只有 70-100dpi,所以對於同樣大小的文字,在顯示器上就只能用很少的點來顯示。如下圖,同樣是 12pt 的漢字(相當於 Word 中的小四號),印刷出來已經不算小字了,而且也可以保證很清晰,而在螢幕上同樣大小的漢字只能使用區分 12*12 個點來顯示,於是如何讓它能清晰地呈現出來就成了一個問題。

font2

2. 液晶顯示器的普及

在以前,使用 CRT 顯示器的時代,解決這個問題的方法是使用點陣字體,無論是 Windows 還是 MacOS 都使用了同樣的方法。也就是說,完全不用抗鋸齒,只需要把系統字體中常用字號(比如 12pt,14pt,16pt)的每個字都專門使用點陣的形式儲存。當然也有很明顯的缺點,就是如果顯示更大的字則會有恐怖的鋸齒,顯示更小的字則完全無法辨認。而且在這個系統中只能使用經過點陣處理過的字體,其它字體的顯示將會慘不忍睹:

font3

這種現象在點和像素一一對應的液晶顯示器上體現的尤為明顯,於是人們逐漸不能接受這種鋸齒嚴重的文字了。文字的抗鋸齒技術就出來了,在 MacOS X 和 Windows Vista 上都開始使用了自己的針對液晶螢幕的文字抗鋸齒技術。

液晶螢幕有一個特點,就是每一個點是由橫向排列的紅、綠、藍三色組成的,人們可以通過一個像素的不同顏色來對這 3 個點精確控制。

下圖分別是 1:1 的顯示效果、8 倍放大和局部 32 倍放大,中間的圖是向顯示器輸出的顏色,右邊的圖是顯示器的實際顯示。我們可以看到,只控制灰度和分別控制的區別還是比較大的,尤其是在筆劃較複雜的情況下。三個點分別控制在白底黑字下可以只用 1/3-2/3 個像素就能清晰地顯示出一個筆劃。

font4

而只控制灰度就需要 1 個完整的像素才能顯示出清晰的黑色筆劃:

font5

正是這個特性使更精確的控制文字鋸齒得到可能。當然,對於那些像地鐵車廂裡完全由單色 LED 組成的螢幕也只能使用點陣字體,無法採取任何抗鋸齒方法。

3. 對比測試

無論是 Windows 還是 MacOS 都採用了上述的對一個像素 3 種顏色的精確控制來抗鋸齒。
測試分別使用了 12px、14px 和 16px 的 4 種字體,這 4 種字體都是 Windows 的系統字體,分別是:
簡體中文版 Win98/XP 的系統字體:宋體,簡體中文版 Vista/7 的系統字體:微軟雅黑
繁體中文版 Win98/XP 的系統字體:新細明體,繁體中文版 Vista/7 的系統字體:微軟正黑體

在 12px 的字號下,我們可以看到,Windows 對於以前作業系統的字體還是採用了當時的處理方法,就是不放棄當時為它花那麼多時間生成的點陣字庫,依然繼續使用完全不抗鋸齒的方法。而 MacOS 在抗鋸齒上做的非常好,這麼小的字依然可以清晰識別。

因為不抗鋸齒兩個字之間就至少要有一個像素的間隔來防止它們連在一起,於是其實它們只有 11*12 的空間,而微軟在細明體的處理上為了防止它看起來有些長,於是只使用了 11*11 點的空間,點陣字體最嚴重的問題就是如果在筆劃複雜的字上,幾乎是完全無法辨認的,只能採取簡化的方式來處理。

font6

而新一代的 Windows 系統字體,微軟是專門為它們針對 ClearType 進行過優化的,也就是說在較小的字號下,它們並不是完全根據這個字體來進行抗鋸齒處理,而是針對這一字號,把所有的文字都單獨進行了優化後存入這個字體。只能用 ClearType 讀取並輸出,據說微軟在每個字上就花了 200 美元的成本。當然好處也是很明顯的,明顯 Windows 下這兩種字體的抗鋸齒輸出都比 Mac 下清晰得多,只是有些神奇的是他們有些字比另一些字的高度少了一個像素,導致高矮不齊。

font7

基本情況就是這樣,14px 和 16px 就不用放大來看了,

font8

這裡我們可以看到,Windows 中進行測試的這幾種字體和字號要麼是點陣的,要麼針對 ClearType 進行了優化,只有細明體在 14px 的時候居然沒有點陣,那麼正好,我們可以來對比一下 Win 和 Mac 的抗鋸齒能力。可以很明顯的看出來在 Windows 下,字體並不平滑,而在 Mac 下就好得多。

即使是沒有特殊處理,MacOS 下在 14px 以上的宋體和黑體的顯示也是很完美的,而 12px 則稍有筆劃粘連的現象。而 Windows 下因為做了特殊處理,所以清晰度是沒問題的,但就是會有高低不齊的現象。而 Windows 到了 16px 居然還用點陣顯然明顯有點過分,鋸齒實在是太明顯了也。。。。

以下是對複雜文字的測試:

font9

我們可以看到在 12px 的時候,幾乎全部無法識別,在 14px 的時候,也幾乎無法辨認。在 16px 的時候,點陣字體還是把字簡化的不知道是什麼,而 Mac 下就要好很多。而對於兩種黑體,遇到中間這幾個「韊䰱䴒齉」雅黑優化過在 Windows 下就還不錯,而最後那個「龘」在 Win 下則比較慘,Mac 下識別率要高一些。

4. 總結

我們可以看出 MacOS 的抗鋸齒已經達到了非常高的水平了。因為微軟雅黑是為 Windows 的 Cleartype 專門優化過的,所以配合 Cleartype 的顯示效果是最好的。所以千萬不要以為在 MacOS 下微軟雅黑會比 Windows 的效果好。

而對於沒有優化的字體的抗鋸齒,只能對 Windows 表示遺憾了,跟 MacOS 的差距還是相當大的。雖然測試過程中只有 14px 的細明體是這種情況的,但已經可以很明顯的看到差距了。

PS:看螢幕要在正常的距離看噢(約 50cm),不要離的很近看然後說哪個字都不清楚。。畢竟解像度擺在那裡。。。。

最後來說一下 iOS 下的抗鋸齒:

在 iOS 中,並沒有使用像素的顏色來控制 3 個點,而是直接使用了灰度的抗鋸齒。這就是為什麼人們看 iPad 或 iPhone 1-3,會覺得文字的鋸齒感較強,而不如 MacOS 或 Windows 下的平滑。

而在 iPhone 4 的 Retina 下,雖然也是一樣的,但是因為解像度已經高達 326dpi,就完全看不出來了~~~~

font10

此文章外部 RSS 源如果圖片不是 1:1 顯示的話則沒有任何效果,請查看原文。

評論請移步微信公眾號

,


讚賞