網頁中英文字型(font-family)跨平台設定最佳化

中文字體由於先天上的諸多限制，無法像英文字體般，在網頁上能有多樣性的呈現。若是想與眾不同，最簡單的方式是將特殊中文字型做成圖形(例如網站標題及敘述)，不過缺點是不利於 SEO。

而不使用圖形也是有辦法來顯示自訂字型，可參考這篇「自製中文網頁字形（Web Font）並內崁至網頁中」，不過操作步驟很多，需要一些基礎知識，且 IE8(含)以下不支援；另外的方法就是付費使用某些線上的服務了。

那麼退而求其次，假設不滿意 "新細明體" 的效果，能否讓網頁在各種作業系統下都能顯示其最佳字型呢？以下為整理 CSS 語法 font-family 的心得筆記，先說明各種設定的原理，若想直接看結果請跳到「五、最佳化設定」。

一、各平台預設的中文字型

由於中文字型檔太大(都是數 MB 起跳)，網頁不可能引用特定的中文字型檔來呈現某種字體，還沒載入完畢訪客就會先行告辭了，因此最好的方法就是讓網頁顯示作業系統的中文預設字型。

大部分作業系統都能顯示的 "新細明體"，若想要改為顯示其他字型，那麼得先瞭解一下各種作業系統的預設中文字型，以下大致列出各系統較熱門的預設繁體字型：

1. WIN 2000/XP

新細明體：PMingLiU
標楷體：DFKai-SB


2. WIN Vista/7/8

微軟正黑體：Microsoft JhengHei
微軟雅黑體：Microsoft YaHei
標楷體：DFKai-SB


3. Mac OS

黑體-繁：Heiti TC (Mac OS 10.6 以後預設字型)
儷黑 Pro：LiHei Pro
標楷體：BiauKai

以上 1～3 詳細的字型列表可參考這個網頁「常用的中文字體的英文翻譯」


4. Linux

文泉驛正黑：WenQuanYi Zen Hei
全字庫正楷體：TW-Kai


5. Android

Android 系統的字型很少，不過預設中文字型 Droid Sans 就已經比新細明體好看，所以不用特地為 Android 系統設定中文字型。

二、英文字型及中英文字型的設定順序

1. 英文字型選擇

各種作業系統能共用的英文字型非常多，想找出幾個最佳共用字型的話，可參考這篇「Best font family for windows, mac and linux」，選擇喜歡的自訂英文字型。


2. 中英文字型個別設定的順序

如果網頁的中、英文想要各自使用不同的字型，那麼 CSS 的語法 font-family，設定字型的順序就非常重要，請參考這篇「CSS font-family 順序」有詳解。

簡單舉兩個例子：

◎ font-family: "新細明體", Arial;

中文字型在前、英文字型在後，這是錯誤的設定方法 → Arial 這個英文字型永遠不會被使用，因為 "新細明體" 已經內含英文字型，所以英文字永遠會使用 "新細明體"。


◎ font-family: Arial, "新細明體";

英文字型在前、中文字型在後，這是正確的設定方法。英文字會使用 Arial 這個字型；而中文字在 Arial 字型找不到編碼，便會轉而找順位在後的 "新細明體" 來使用。


3. 中文字型設定順序

依據同樣邏輯，如果把含括性較廣的中文字型設定在前、而較不通用中文字型設定在後，那麼就是錯誤的設定方式。請見以下舉例：

◎ font-family: "標楷體", "儷黑 Pro";

這是錯誤的設定方法，由於 "標楷體" 幾乎每個作業系統都有，在 Mac 上也有，這麼設定的話，"儷黑 Pro" 就沒有被執行到的機會了。


◎ font-family: "儷黑 Pro", "標楷體";

使用機率低的中文字型在前、使用機率高的中文字型在後，這是正確的設定方法，Mac 上會使用 "儷黑 Pro" 這個字型；而非 Mac 系統找不到 "儷黑 Pro" 時，便會轉而使用順位在後的 "標楷體" 來使用。


4. 補充說明

• 英文字型名稱由一個單字組成，不須加雙引號；由兩個以上的單字組成，則須加雙引號。
• 中文字型名稱最好都加雙引號，以確保瀏覽器相容性。

三、字型名稱與通用字型

font-family 的參數可以使用兩種：字型名稱(family-name)與通用字型(generic-family)，詳解請參考這篇「CSS font family 字型 字體」。

簡單來說：

• 前面提到的 Arial、新細明體 都是 "字型名稱"。
• "通用字型" 是瀏覽器的預設字型。
• 萬一我們設定的 "字型名稱"，瀏覽器在作業系統找不到字型檔時，那麼設定 "通用字型" 就是一個買保險的動作，讓瀏覽器能找到字型來顯示。

因此，配合前面中英文字型混合的例子，讓瀏覽器能正常顯示字體的安全設定方法為：

font-family: Arial, "新細明體", sans-serif;
字串 "sans-serif" 可改用其他通用字型，請參考上面參考連結的內容。

四、不同語系的設定

前面的例子設定了參數字串 "新細明體" 為中文字型，實際上，這樣的設定參數無法通用各種瀏覽器版本及各種語系。簡單說，IE 在「中文(台灣)」的作業系統環境，只認得 "新細明體" 這個參數；而 IE 在其他(國外)地區的系統，只認得 "PMingLiU" 這個英文參數。所以如果華人訪客來自國外、使用 IE 連上我們網站時，若 font-family 沒有設定正確，就看不到我們設定的中文字型了。

因此，配合前面的例子，讓瀏覽器能正常顯示字體的安全設定方法為：

font-family: Arial, "新細明體", PMingLiU, sans-serif;
同一個中文字型，使用兩個中英文語系字型名稱並存的設定方法，是跨瀏覽器、跨語系的安全作法。

五、最佳化設定

1. 概念

綜合以上的基礎知識，font-family 的參數必須從含括範圍最小的字型，一路設定到含括範圍最大的字型，才能達到跨平台(作業系統)、跨語系的最佳效果。

大致上可行的概念為：

英文字型 → Linux 字型(中英文名稱) → Mac 字型(中英文名稱) → Vista 字型(中英文名稱) → XP 字型 → 通用字型


2. 實例

根據以上概念，試做一個範例，來兼顧各個作業系統：

font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", "標楷體", DFKai-SB, sans-serif;

六、依網頁不同區塊設定 font-family

有了最佳化的概念後，我們可以為網頁不同區域的字型來分別設定。


1. 全部網頁

如果字型的設定想套用到全部網頁，那麼可在範本中尋找 body {...} 這個區間，新增或修改原本 font-family 的參數設定。


2. 標題

網頁的文章標題，WFU 覺得用楷體比較好看(如本站使用 "標楷體" 的效果)，以 Blogger 為例，可參考以下的步驟及參數：

1. 如果文章標題沒有超連結效果，可尋找範本中的字串類似 h3.post-title {...} 這個區間，然後加入 font-family 的敘述。

2. 如果文章標題有超連結效果，可尋找範本中 h3.post-title a {...} 這個區間(找不到以上字串時，可用新增的方式，請參考後面「3. 文章內文」)，然後加入 font-family 的敘述。

3. font-family 敘述可為以下：

font-family: Arial, "全字庫正楷體", "TW-Kai", "標楷體", "BiauKai", DFKai-SB, sans-serif;

3. 文章內文

網頁的文章內文區塊，如果想換掉預設的新細明體，改為各個作業系統顯示效果較佳的自訂字體，以 Blogger 為例，可參考以下的步驟及參數：

• 對範本熟悉的話，在 CSS 區段加入 font-family 相關敘述。
• 不熟悉的話，先在範本中找到 </head>，在前一行插入以下程式碼：

<style>
.post-body {
  font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", sans-serif;
}
</style>
如此一來，在大部分的作業系統，都不會出現 "新細明體" 了！

以 WFU BLOG 為例，經以上設定後，目前文章內文的字體，在 Linux 將顯示 "文泉驛正黑"；在 Mac 將顯示 "儷黑 Pro"；在 Win Vista 以後的系統將顯示 "微軟正黑體"；只有 Win XP，因為沒有特別設定，系統還是會回去找 "新細明體"。

七、補充

有了本文的知識後，在 windows 系統至少我們可以改用 "微軟正黑體"。而更進階的問題會是，「除了微軟正黑體，還有沒有其他好看的 windows 系統字型能夠選擇？」

的確是有的，例如本站目前採用的字體為「明瞭體」，而如果想知道 windows 在網頁上更多的字型選擇，WFU 另外整理了一篇「網頁中文字型除了微軟正黑體, 還有這些好選擇！」，相信讀者都能藉由其中的列表、及效果比較，來找出心目中的最佳字型。

更多字型相關文章：