2014年2月3日

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

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 另外整理了一篇「網頁中文字型除了微軟正黑體, 還有這些好選擇!」,相信讀者都能藉由其中的列表、及效果比較,來找出心目中的最佳字型。


更多字型相關文章:

14 則留言:

  1. 看了這篇文才讓我想到把 Linux 和 Mac 的字型補上. 以前總認為會使用 Linux 或 Mac 的人應該也很重視字型; 所以我採用只特別標示給 Win 的使用者, 而其他系統使用預設字型. 沒預想過國外的使用者.
    我想中文的顯示是特別重點; 而中文使用者最大宗的微软雅黑体也該附上.

    回覆刪除
  2. <2402648777478537408>(以上內容請勿刪除,從括號之後開始留言)字體非我所長,所以這篇完全只是整理 google 來的資料。感謝您提到 "微軟雅黑體" 使用者為最大宗,那就補充到內文。

    不過使用者想設定何種字型的話,基本上內文附的連結裡面都羅列得很詳細了。

    回覆刪除
  3. <229199706302178327>(以上內容請勿刪除,從括號之後開始留言)您太謙虛了! 字型設定是中文 Blogger 必修的課程, 愛摸摸改改的部落客總會遇上 XD

    回覆刪除
  4. <6997352904992813024>(以上內容請勿刪除,從括號之後開始留言)我是硬著頭皮上啊~~XD
    這方面還得多多跟您請教!

    回覆刪除
  5. 您好,不好意思,我是上次留言說字體問題的,不是我的網站有問題,是您的網站有問題。 因為我根本沒在用網站 XD http://imgur.com/532S1yp 文泉驛是官方網站下載的 ttf,系統是 windows 7,瀏覽器 chrome 33 PS. 只有 chrome 有此問題 << 這一點當初沒說清楚

    回覆刪除
  6. <7616623175426271657>(以上內容請勿刪除,從括號之後開始留言)謝謝您提供的訊息,由於 "文泉驛" 一般在 linux 系統才會看到,因此您的狀況算滿少見的,較少人在 windows 系統使用這種字體。

    因此使用本文的設定方式大致上沒什麼問題,如果擔心這種狀況的話,那麼設定字體時,可以不設定 "文泉驛" 這個字體。

    回覆刪除
  7. 我在我的部落格設定好以後,文章那些字體都有變,可是首頁的字體不管怎麼調都是新細明體
    是哪邊有漏掉嗎?

    http://lonloninn.blogspot.tw/

    回覆刪除
  8. <7745309618311270205>(以上內容請勿刪除,從括號之後開始留言)我不知道你設定的內容,也許你直接貼出你的設定內容。如果你只設定文章部份的 CSS,當然只有文章內字型會生效囉~

    回覆刪除
  9. <6139058834848316423>(以上內容請勿刪除,從括號之後開始留言)

    主要問題還是首頁幻燈片的字型不會變,但我又找不到那個幻燈片的字型到底是哪一個

    Orz 幻燈片的問題真多...

    回覆刪除
  10. <6377100665267294853>(以上內容請勿刪除,從括號之後開始留言)

    我全部一個一個找出來改,總算全部改好了 Orz
    可以幫我看一下是否有正確顯示嗎?

    回覆刪除
  11. <6224967940614937339>(以上內容請勿刪除,從括號之後開始留言)恭喜~我看已經不是細明體了 :)

    回覆刪除
  12. 有兩個問題:
    1. Ubuntu 12.04+ 是否已預設了 SimSun/文泉驛正黑
    2. Mac 不是應該更新為 Hiragino Sans GB?
    3. Ubuntu 14.04 應該改為 Droid Sans Fallback?

    回覆刪除
  13. <6710256127249184055>(以上內容請勿刪除,從括號之後開始留言)我沒使用 linux、Mac,你可以查看自己作業系統的字型來設定。

    回覆刪除
  14. 在Win7實際測試時,大部分的字型都可以只設英文名稱就讀取到。
    比如說我地區設台灣,設PMingLiU和設成新細明體,效果是一樣的。

    目前看到的唯一例外是思源黑體,這字型在IE,FX,GC的處理上都各有微妙的不同,礙於篇幅就不在這裡提及。

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。