« QuickEffect 1.0 | Main | iCal 的生日行事曆匯入 YABI »

最佳的瀏覽器閱讀體驗

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) 格式。很抱歉此篇文章可能會需要花點時間載入較大量的圖片。

TrackBack

TrackBack URL for this entry:
http://applewoods.org/mt/mt-tb.cgi/3906

Comments

請問一下你的 Safari 是採用 Nightly Built 的版本嗎?因為官方版的 Safari 沒有辦法顯示出中文字的 typeface
因為官方版的 Safari 沒有辦法顯示出中文字的 typeface
I failed to understand your point.
It's not WebKit, it's the released version of Safari in Mac OS X 10.4.8. Internet Explorer 6 and Firefox 2 were under Windows XP SP2 installed under Parallels Desktop for Mac. All in default settings, no special style sheet applied.
因為我的 Safari 沒辦法對中文字顯示出 Bold/Italic 的效果,不過你的圖看起來在粗體上還是有一點點區例
LOL, 你这完全是从错误的来源出发得出错误的结果。 你知不知道 TrueType 字体可以内嵌点阵 (Bitmap) 而不必用向量 (vector) 字型?Windows 下中文的情况就是如此,因为使用了内嵌点阵,自然 ClearType 或者普通的 AA 就被 disable 了。 不用同一套字体来作的比较根本没有任何意义,你这篇文章犯的就是这个错误。
如果在國際設定第一優先使用繁體中文,則在許多軟體中(如safari、iwork等),中文並沒有bold或italic。這是因為OS X的繁中預設字型中,並沒有bold與italic的選項。但是日文的OS X就有!所以我的做法是在國際設定中把日文拉到比繁中優先,但英文拉在最上方(因為日文在最上方我也看不懂日文的OS X……)。如此一來,中文會有bold與italic,但也有缺點:中文標點符號會偏左下,而這點可能造成許多人的困擾吧。 但我仍想提出OS X比起Windows XP在中文的一項優點:同時內建一組黑體字型(相似於西文的sans-serif)與一組明體字型「相似於西文的serif」字型;但XP永遠都是明體。這點對於以OS X瀏覽中英文參雜的網頁有很棒一致性與效果。
jjdog,
You missed the point.
The main point of this article is... The included font and the built-in technology in OS X make reading under Mac OS X more appearing as well as easier to read.
在 windows 內建的新細明體/標楷體字型下,的確是如此。標楷體和細明體我記得只有 > 12pt 才會有 AntiAlias 的效果,至於 ClearType 我不記得在哪個 size。但是可以嘗試一下使用 Vista 的微軟雅黑體,他在小字體的時候,Windows 也會對他做 AntiAlias 或 ClearType 處理。但是使用過和 Mac 相較的結果,我還是比較喜歡 Safari 在網頁所 render 出來的表現。
另外 Safari 粗體的問題,如果在 International 設定中,把 Japanese 移到繁體和簡體中文前面,有些頁面的粗體效果就會出現。事實上應該不是稱作粗體,因為跟原本繁體中文比較的結果是,先前的網頁某些文字變比較細,大概是因為 font priority 的關係使用了不同的字體。所以就變成粗細有別。
感謝 jclin 的解說,原來是 Font Priority 的問題 Safari render 的功力確實厲害,Firefox 2.0 在黑體的 render 上有時候還不如 Safari 來得明顯。

Post a comment

TypeKey: 如果您有 TypeKey 認證,請登入 (sign in) 並在此使用。



:

« QuickEffect 1.0 | applewoods.org (main page) | iCal 的生日行事曆匯入 YABI »

promotion


Picturesque 2.0 八折優惠
(省下 20% 金額的好康分享!)


Parallels Desktop for Mac 4.0
(省下 $5 美元的獨家優惠)


special

Mac大補帖之Intel inside
Mac大補帖之Intel inside

Mac大圖解-軟體大攻略
Mac大圖解-軟體大攻略

免費 iTunes 音樂
免費 iTunes 音樂。須有 iTunes Store (USA) 帳號
Powered by
Movable Type


Page URL: http://applewoods.org/archives/2006/12/best_reading_experience.php
[applewoods] [about applewoods] [contact us] [sitemap]
轉載請標明作者、出處 Copyright © 2004 - 2010 Jack Lin, Antony Shen. All rights reserved. Hosted by SillyDog701.