如何在網頁中使用OpenType字體

• Myriad Pro

  

• Trajan Pro

  

• Adobe Garamond Pro

  

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

• Garamond

  

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

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

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

Firefox 3.5

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

IE 6 ~ IE 8

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

Google Chrome 4

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

Opera 10

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

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 字體，以及用的時候應該注意些什麼。畢竟，想錦上添花但最後弄巧成拙的話也是很令人鬱悶的。