網頁中文字型除了微軟正黑體, 還有這些好選擇！(windows)

對於網頁能使用的中文字體，我們比較難有自訂的選擇。上一篇「網頁中英文字型跨平台設定最佳化 」說明了，由於中文字型檔太大，網頁絕對不能引用外部中文字型檔，否則載入速度可以讓訪客好整以暇地泡好一杯咖啡，並跳離該頁面。

前陣子 Google 發布了免費的中文字型「思源黑體」，不過請打消將這個字型設定在網頁上的念頭，因為這不是作業系統的預設字型，多數訪客的電腦中依然沒有這個檔案，就算設定了這個字型，訪客仍然看不到思源黑體的。

而在使用者最大宗 Windows 系統下，網頁設定中文字型比較順眼、常見的選擇會是「微軟正黑體」。但 WFU BLOG 設定的幾項字型中，主要使用的是「明瞭體」，如果沒聽過的話，其實還有更多你沒聽過的字型可用。想知道還有哪些不錯的中文字體可選擇嗎？請見以下詳細的整理。

一、不適合在內文使用的中文字型

1. Windows 所有可用的中文字型

以 Win8 為例，進入系統資料夾 Windows → Fonts 可看到所有字型檔，其中「中、日、韓」這三個地區的文字特點是 "都有漢字"。雖然「日、韓」字型會缺字，不過網頁基本的常見字都還有，所以可拿來當中文字型用。下圖是可用字型一覽──




2. 不適合在網頁內文呈現的字體

上面列表在中文的部份，有黑體、明體、楷體、宋體(簡)可選擇。當這些字體用於標題，在比較大的像素 24px 以上展現時，看起來的效果都還好。不過在內文中使用的字體一般較小，約 13px～18px 這個範圍，以下是這些字體用於內文時的效果比較──




WFU 的個人感覺是，在字體較小時，使用黑體看起來會比較舒服、順眼一些。不過微軟雅黑比較可惜的是，其預設是簡體，若在小字的情況下當內文使用時，繁、簡混雜會讓很多字看起來非常不搭。而宋體的評價排在黑體之後、其他字體之前。

結論是使用非簡體的黑體，當作內文使用會表現較好，而黑體以外的字型，可以考慮用在網頁其他區塊，或是特定點綴、裝飾用途。以下先討論適合內文的字型，將比較各語系的黑體字型。


3. 各語系的黑體字型列表

排除不相關字型後，以下是所有的黑體字型：

• SimHei (簡)
• 微軟正黑體
• Microsoft YaHei (微軟雅黑 簡)
• Meiryo (明瞭體 日)
• MS Gothic (日)
• MS PGothic (日)
• Yu Gothic (游黑體 日)
• Dotum (韓)
• Malgun Gothic (清黑體 韓)

接下來看看他們在內文字體大小的效果比較。

二、黑體字型效果比較

1. 內文效果




在小字 13px 的表現：

• 雅黑、明瞭體比較清楚
• 清黑體 (Malgun Gothic 韓)也 OK, 但可惜 "偽" 漏字，轉而以細明體展示。
• SimHei (簡) 也夠清楚，但繁體字比較難看一些。
• 其他黑體的線條稍微偏細。

在小字 18px 的表現：

• 個人覺得明瞭體綜合表現第一
• 雅黑還不錯，但繁、簡體的字擺在一起，有些看起來似乎不太搭。
• 字體放大後，很多都比較好看了，不過線條偏細的那幾個，可能還是不適合設定來顯示內文，讀者可憑自己喜好挑選。

2. 標題效果




大字 24px 標準字體 的表現：

• 幾乎全體表現都不錯，個人認為雅黑綜合表現第一(小字時的簡、繁不搭情形，因為字體放大後，不是那麼容易看出來)

因為標題通常使用粗體，需要比較 24px 粗體 的表現：

• 雅黑及明瞭體似乎有過粗的感覺，不過若將字型再放大、拿來當網站標題是適合的。
• 除了漏字的問題，清黑體(Malgun Gothic 韓) 綜合水準是不錯的。
• 除了以上過粗的兩個字體，幾個日文字體例如游黑體(Yu Gothic 日)都不錯、其他的黑體看起來也不差。

三、字型設定實作

如何跨平台設定網頁的中英文字型，可詳閱：

• 網頁中英文字型最佳化

下面以 Blogger 為例，只說明 Windows 系統部份的字型設定，而其他作業系統的字型設定，請務必參考以上教學連結。

非 Blogger 的平台若想套用以下實作範例來修改 CSS，建議使用「Chrome 開發人員工具」找出區塊的 class 或 id，在瀏覽器變更 CSS 參數來測試，再到範本或後台修改字型的 CSS 設定。


1. 網站次標題

如前所述，在大字體的表現，個人比較欣賞清黑體(Malgun Gothic 韓)的效果，而韓文會漏字的情形，在後面指定一個粗細差不多的中文黑體字型，即可解決這個問題。經過審慎比較後，選擇了 SimHei(簡) 這個字型。

網站次標題 "偽 ‧ 雲端 ‧ Blogger 調校資料庫" 便是採用這個方案，以下為操作步驟──

在範本中找到 .Header .description {...} 這個區間，新增或修改以下參數：

font-size: 30px;
font-family: "malgun gothic", simhei; /* 其他作業系統的字型設定請參考前述教學連結 */
font-weight: bold;

下圖為效果──




2. 文章標題

文章標題使用了粗細均勻的游黑體(Yu Gothic 日)，而日、韓字型會漏字的情況，一樣交給線條比例相當的 SimHei(簡)，以下為操作步驟──

在範本中找到 .post-title {...} 這個區間，新增或修改以下參數：

font-size: 26px;
font-family: "Yu Gothic", SimHei; /* 其他作業系統的字型設定請參考前述教學連結 */

下圖為效果──




3. 文章次標題

前面兩項都沒使用微軟雅黑體，是為了避免過粗顯得突兀，而文章中的次標題都是重點提示，需要使用最粗的效果，此時雅黑便派上用場。

WFU 在文章中設定次標題的方法請參閱「Blogger 文章標題最佳化__(3) 修改範本 H1 H2 H3 標籤實用技巧」→「三、加強文章中的 SEO 效果」→「2. 有效率的文章範本範例」。

這些自行設定的 h2、h3、h4 標籤要設定字型 CSS 的話，以 Blogger 為例，後台範本 → 自訂 → 進階 → 新增 CSS：

.post-body h2, .post-body h3, .post-body h4 {
font-size: 22px;
font-family: "Microsoft YaHei"; /* 其他作業系統的字型設定請參考前述教學連結 */
}
效果可見本文的文章次標題(如果你使用 Windows 系統的話)。


4. 文章內文

本站在內文使用「明瞭體」已經有不短的時間，覺得比「微軟正黑體」的效果好上不少，同時將字體調大後可讓讀者有非常舒適的閱讀體驗。

而「明瞭體」這個日文字型會漏字的情況，我選擇交給「微軟正黑體」。以下為操作步驟──

在範本中找到 .post-body {...} 這個區間，新增或修改以下參數：

font-size: 18px;
font-family: Meiryo, "微軟正黑體", "Microsoft JhengHei"; /* 其他作業系統的字型設定請參考前述教學連結 */
效果可見本文的內文字體(如果你使用 Windows 系統的話)。


5. 導覽列、標籤、側邊欄

更改個別區塊的字型 CSS 設定，如前所述建議使用「Chrome 開發人員工具」找出區塊的 class 或 id，在瀏覽器直接變更 CSS 參數無誤後，再到範本中修改會比較快。

目前本站導覽列使用的是「雅黑」，網站其他部份使用的是「SimSun(宋體 簡)」。

四、一些補充

1. 搭配的英文字型

設定完黑體字型後，跟英文字型的視覺效果能否搭配也是一個學問。最簡單的方法就是只設定中文字型、去除英文字型的設定，那麼網頁在抓英數文字時，仍會去讀取黑體的字型。

只不過，不是每個中文字型的預設英文效果，都能跟中文搭配得很好。如果想要更美、又能搭配黑體的英文字型，可參考這篇「word 預設中英搭配有什麼問題」，來找出更好的選擇。


2. 其他平台

雖然這篇只有提到 Windows 系統的中文字型，不過只要依照同樣的流程，也是能找出其他作業系統(例如 Mac)最適合自己網頁的中文字型，並進行最佳化設定。


3. 個人觀點

由於這篇的範例選擇算是個人觀點，不代表這樣的審美觀一定是好的，也不見得這些選擇適合每個網站，也不一定需要為不同區塊都設定不同字型。

不過本文提供了各種 Windows 現成字型的圖示與效果，只需要參考範例、及教學連結，相信讀者都能找到自己心目中理想的字型，並成功套用在自己的網站。

更多字型相關文章：