最佳的瀏覽器閱讀體驗

fontbook.jpg
順眼的字體確實讓閱讀更輕鬆愉快

大部份的網頁設計師都了解,不同的瀏覽器對 W3C 標準也有不同的轉譯與呈現,有時候那不僅是未支援某種規格的問題,而是這些瀏覽器以不同的方式解讀這些標準。大部份貼心的網頁設計師都清楚應該儘可能地以各種瀏覽器進行頁面測試,但實際上不少設計師卻忽略了 Mac OS X。在這篇文章裡,我們打算討論比 CSS 或 HTML 語法更基本的部份,就是 “字體” 在頁面上的呈現。
我們都清楚一份高品質的印刷品可以提升閱讀的樂趣,而列印的文件總是比螢幕上文件更容易閱讀,這是因為列印文件的 DPI (300 dpi+) 通常較螢幕上的顯示 (72 or 96 dpi) 高得多。值得恭喜的是,如果您是個 Mac OS X 使用者,您便可享受最佳的螢幕閱讀體驗。


一開始我們先來看看這世界上最受歡迎的作業系統 Windows XP。在 Windows XP 中,它提供了兩種層次的字體平滑處理技術:標準 (standard) 與 ClearType。
以下是在 Windows XP 的三個擷取畫面,使用相同的瀏覽器、載入相同的網頁 (http://www.apple.com.tw/universal/),但套用不同的字體平滑處理設定。
Internet Explorer 6 (未套用字體平滑處理技術):
Internet Explorer 6 without font smoothing
Internet Explorer 6 (套用標準字體平滑處理技術):
Internet Explorer 6 with standard font smoothing
Internet Explorer 6 (套用 ClearType 字體平滑處理技術):
Internet Explorer 6 with ClearType font smoothing
讓我們更仔細地瞧瞧這些標準 (standard) 與 ClearType 字體平滑處理技術的對照。
(none) vs standard vs ClearType
很清楚地,Windows XP 的字體平滑處理技術並未適用於中文字元,但對於英文而言,卻有不錯的表現,您可以比較 “Mac” 或 “Intel Core” 清楚得知。
接下來,我們進行了相同的比較,不過這次我們使用的瀏覽器是 Firefox 2 (在 Windows XP 上)。
Firefox 2 (未套用字體平滑處理技術):
Firefox 2 without font smoothing
Firefox 2 (套用標準字體平滑處理技術):
Firefox 2 with standard font smoothing
Firefox 2 (套用 ClearType 字體平滑處理技術):
Firefox 2 with ClearType font smoothing
與之前同樣的情形也出現在 Firefox 2 瀏覽器,但我們留意到不同的瀏覽器會使用不同的字體樣式。
IE6 vs Firefox 2
無論使用哪個瀏覽器,我們可以留意到 “粗體 (bold)” 的字體樣式讓中文字元比較不易閱讀。
現在,我們來看看 Mac OS X 平台上對字體的顯示與呈現。
Mac OS X 上的 Firefox 2:
Firefox 2 on Mac OS X
另一款不錯的瀏覽器 Camino:
Camino
兩者看起來相同,但很明顯地相較於 Windows XP 的環境,Firefox 2 (在 OS X) 與 Camino 讓每個字元更容易閱讀。Quartz 技術的確扮演了相當稱職且不錯的角色!
壓軸就是我們最愛的 Safari:
Safari
我們相信可以大膽地總結,Safari 在這項 “字體顯示” 的項目中是最後的贏家,它讓使用者可更輕鬆地、更享受地閱讀中文字元。且在 OS X 上,Safari 也較 Firefox 或 Camino 更容易地閱讀與辨識粗體的字樣。
Mac OS X 不僅僅提供了美觀的字體樣式,Quartz 技術也讓螢幕上的文字更加清晰、銳利與清楚。

Quartz 算圖引擎以驚人的清晰度顯示字體的各種大小。

(出處來源)

這也是為什麼您應該使用 Mac OS X 勝於 Windows 的另一項原因,尤其是若您必須在電腦上從事大量閱讀與寫作的話。我們也必須指出,在這篇文章中我們將重點放在螢幕上顯示的中文字元,而 Windows 內建的 ClearType 對英文字確實也有不錯的表現與處理。
在上面的例子中,我們覺得中文文字的字體大小過小,如果與其他大部分的中文網站相比,有些使用者可能留意到 applewoods 使用了稍大的字體,我們希望能讓閱讀更加輕鬆與容易。
為了保存各種顯示畫面中實際的輸出情形,我們對這篇文章的所有擷取畫面,使用了 PNG (24-bit) 格式。很抱歉此篇文章可能會需要花點時間載入較大量的圖片。