搜尋

隨機推薦

25 十二月 2010

如何在網頁中使用OpenType字體

首先說明一下,在這裡討論的均是 Windows XP 操作系統下的情況,其他操作系統下我還沒有機會進行測試。

首先讓我們來看看什麼是 OpenType 字體:(via Wikipedia

OpenType,是一種可縮放字型(scalable font)電腦字體類型,採用PostScript格式,是美國微軟公司與Adobe公司聯合開發,用來替代TrueType字型的新字型。這類字體的文 件擴展名為 .otf,類型代碼是OTTO,現行標準為 OpenType 1.4。

下面是一些 OpenType 字體的例子:

廣告

  • Myriad Pro

    Myriad Pro

  • Trajan Pro

    Trajan Pro

  • Adobe Garamond Pro

    Adobe Garamond Pro

上面給出的截圖都是在我 Windows 下的 Firefox 3.5.5 中渲染出的字型截圖。下面給出一張同樣環境下 TrueType 類型字體 Garamond 的渲染效果截圖:

  • Garamond

    Garamond

經過與 TrueType 字體進行比較後我們可以明顯地發現 OpenType 字體在 Windows 下的渲染效果更加平滑美觀:

TrueType vs. OpenType

事實上多數用戶的系統中是不會安裝"Myriad Pro"、"Trajan Pro"這種 OpenType 字體的,所以說在網頁中使用這類字體只能算是一種「錦上添花」。可是,利用 CSS 中的 font-family 屬性,我們是可以對網頁中的字體進行優雅降級(Graceful Degradation)的,即使是少數用戶可能享受到的效果,也值得去進行進一步設計。

但是在實際應用的時候,卻不得不面對現實:應用 OpenType 字體的網頁在各個瀏覽器下的表現並不一樣,在中英文混排的時候甚至會讓 Google Chrome 無法正常顯示中文。我對 6 種字體在各個瀏覽器下進行了測試,讓我們來看看測試的結果(在這些字體都已安裝的情況下):

Firefox 3.5

Results under Firefox 3.5.5

這個結果和我們預期的完全一致。在設為不包含中文字符的字體時,中文字體為系統默認的宋體。

IE 6 ~ IE 8

Results under IE 6~8

IE 6 ~ IE8 下的顯示效果如出一轍,但是和我們預期的有一處不同:在將字體設定為包含中文字符的 OpenType 字體(如"Adobe 黑體")時,在 IE 下中文字體仍然顯示為宋體。而對於 TrueType 字體(如"微軟雅黑")則沒有這種情況。

Google Chrome 4

Results under Google Chrome

在 Chrome 下,悲劇出現了,在不包含中文字符的 OpenType 字體下(如"Myriad Pro"、"Trajan Pro"),瀏覽器沒有選擇系統默認的中文字體,而是將所有中文字符顯示為一個帶叉的方框。而包含中文字符的情況下(如"Adobe 黑體")則表現良好。同時,不包含中文字符的 TrueType 字體下(如 Garamond)則能正常地回退到系統默認的宋體。

Opera 10

Results under Opera 10

Opera 10 下,效果和 Firefox 3.5 下一樣,未發現問題。

Safari 4

Results under Safari 4

Windows 下的 Safari 是不支持 OpenType 字體的,從結果來看,所有情況下都能回退到正確的字體(TrueType 字體如 Georgia、Arial)。

總結

看了上面在不同瀏覽器下的不同效果,我們可以得到如下結論:

  1. 由於 Chrome 下設定不帶中文字符的 OpenType 字體後無法正常顯示中文(即使 font-family 中後續帶有中文 TrueType 字體也不能解決問題),所以在中英文混排的情況下使用非中文的 OpenType 字體意味著放棄 Chrome 用戶。
  2. 在使用中文 OpenType 字體時,在 IE 下中文字體總是顯示系統默認字體,而英文字體則採用該預設字體中的英文字型。同時 IE 一旦在 font-family 中匹配了一個字體就不會繼續搜索下面的字體,所以就算後續字體設為中文 TrueType 字體也無濟於事。也就是說,設置中文 OpenType 字體,在 IE 下起不到多大作用(除非你特別喜歡該中文字體的英文字型),而在非 IE 的瀏覽器內都能正常顯示。
  3. 在純英文的情況下,可以自由使用 OpenType 字體,在各瀏覽器下都有不錯的顯示效果。

我個人很喜歡 "Myriad Pro" 這款字體,而且也看見過不少將其設為首選字體的網站,偶然發現 Chrome 下的嚴重問題,於是便在各個瀏覽器下進行了測試,希望能讓大家知道什麼時候能在網頁中應用 OpenType 字體,以及用的時候應該注意些什麼。畢竟,想錦上添花但最後弄巧成拙的話也是很令人鬱悶的。

廣告

无觅相关文章插件,快速提升流量

Please publish modules in offcanvas position.