2014年2月1日 星期六

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

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

Wayne Fu 0 A+
中文字體由於先天上的諸多限制,無法像英文字體般,在網頁上能有多樣性的呈現。若是想與眾不同,最簡單的方式是將特殊中文字型做成圖形(例如網站標題及敘述),不過缺點是不利於 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

參考:利用 X 字體別名,讓 Linux 桌面環境顯示文件中的標楷體、細明體與黑體


5. Android

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

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

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



七、補充


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

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


更多字型相關文章:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章
TOP