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

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，因為沒有特別設定，系統還是會回去找 "新細明體"。

P.S. 以上算是簡單說明的修改方式，如果 Blogger 想直接改範本中各處的字型設定值，可參考這篇筆記「網站字型替換成"明瞭體"之新手實作整理」。

七、補充

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

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