對於網頁能使用的中文字型,我們比較難有自訂的選擇。上一篇「網頁中英文字型跨平台設定最佳化 」說明了,由於中文字型檔太大,網頁絕對不能引用外部中文字型檔,否則載入速度可以讓訪客好整以暇地泡好一杯咖啡,並跳離該頁面。
前陣子 Google 發布了免費的中文字型「思源黑體」,不過請打消將這個字型設定在網頁上的念頭,因為這不是作業系統的預設字型,多數訪客的電腦中依然沒有這個檔案,就算設定了這個字型,訪客仍然看不到思源黑體的。
而在使用者最大宗 Windows 系統下,網頁設定中文字型比較順眼、常見的選擇會是「微軟正黑體」。但 WFU BLOG 設定的幾項字型中,主要使用的是「明瞭體」,如果沒聽過的話,其實還有更多你沒聽過的字型可用。想知道還有哪些不錯的中文字型可選擇嗎?請見以下詳細的整理。
最早知道「明瞭體」是經由這個網頁「幸好還有明瞭體!」的介紹,也因此瞭解除了中文字型,還有其他地區的字型能夠替代。
1. Windows 所有可用的中文字型
以 Win8 為例,進入系統資料夾 Windows → Fonts 可看到所有字型檔,其中「中、日、韓」這三個地區的文字特點是 "都有漢字"。雖然「日、韓」字型會缺字,不過網頁基本的常見字都還有,所以可拿來當中文字型用。下圖是可用字型一覽──
2. 不適合在網頁內文呈現的字體
上面列表在中文的部份,有黑體、明體、楷體、宋體(簡)可選擇。當這些字體用於標題,在比較大的像素 24px 以上展現時,看起來的效果都還好。不過在內文中使用的字體一般較小,約 13px~18px 這個範圍,以下是這些字體用於內文時的效果比較──
WFU 的個人感覺是,在字體較小時,使用黑體看起來會比較舒服、順眼一些。不過微軟雅黑比較可惜的是,其預設是簡體,若在小字的情況下當內文使用時,繁、簡混雜會讓很多字看起來非常不搭。而宋體的評價排在黑體之後、其他字體之前。
結論是使用非簡體的黑體,當作內文使用會表現較好,而黑體以外的字型,可以考慮用在網頁其他區塊,或是特定點綴、裝飾用途。以下先討論適合內文的字型,將比較各語系的黑體字型。
3. 各語系的黑體字型列表
排除不相關字型後,以下是所有的黑體字型:
接下來看看他們在內文字體大小的效果比較。
1. 內文效果
在小字 13px 的表現:
在小字 18px 的表現:
2. 標題效果
大字 24px 標準字體 的表現:
因為標題通常使用粗體,需要比較 24px 粗體 的表現:
如何跨平台設定網頁的中英文字型,可詳閱:
下面以 Blogger 為例,只說明 Windows 系統部份的字型設定,而其他作業系統的字型設定,請務必參考以上教學連結。
非 Blogger 的平台若想套用以下實作範例來修改 CSS,建議使用「Chrome 開發人員工具」找出區塊的 class 或 id,在瀏覽器變更 CSS 參數來測試,再到範本或後台修改字型的 CSS 設定。
1. 網站次標題
如前所述,在大字體的表現,個人比較欣賞清黑體(Malgun Gothic 韓)的效果,而韓文會漏字的情形,在後面指定一個粗細差不多的中文黑體字型,即可解決這個問題。經過審慎比較後,選擇了 SimHei(簡) 這個字型。
網站次標題 "偽 ‧ 雲端 ‧ Blogger 調校資料庫" 便是採用這個方案,以下為操作步驟──
在範本中找到 .Header .description {...}這個區間,新增或修改以下參數:
下圖為效果──
2. 文章標題
文章標題使用了粗細均勻的游黑體(Yu Gothic 日),而日、韓字型會漏字的情況,一樣交給線條比例相當的 SimHei(簡),以下為操作步驟──
在範本中找到 .post-title {...}這個區間,新增或修改以下參數:
下圖為效果──
3. 文章次標題
前面兩項都沒使用微軟雅黑體,是為了避免過粗顯得突兀,而文章中的次標題都是重點提示,需要使用最粗的效果,此時雅黑便派上用場。
WFU 在文章中設定次標題的方法請參閱「Blogger 文章標題最佳化__(3) 修改範本 H1 H2 H3 標籤實用技巧」→「三、加強文章中的 SEO 效果」→「2. 有效率的文章範本範例」。
這些自行設定的 h2、h3、h4 標籤要設定字型 CSS 的話,以 Blogger 為例,後台範本 → 自訂 → 進階 → 新增 CSS:
效果可見本文的文章次標題(如果你使用 Windows 系統的話)。
4. 文章內文
本站在內文使用「明瞭體」已經有不短的時間,覺得比「微軟正黑體」的效果好上不少,同時將字體調大後可讓讀者有非常舒適的閱讀體驗。
而「明瞭體」這個日文字型會漏字的情況,我選擇交給「微軟正黑體」。以下為操作步驟──
在範本中找到 .post-body {...}這個區間,新增或修改以下參數:
效果可見本文的內文字體(如果你使用 Windows 系統的話)。
5. 導覽列、標籤、側邊欄
更改個別區塊的字型 CSS 設定,如前所述建議使用「Chrome 開發人員工具」找出區塊的 class 或 id,在瀏覽器直接變更 CSS 參數無誤後,再到範本中修改會比較快。
目前本站導覽列使用的是「雅黑」,網站其他部份使用的是「SimSun(宋體 簡)」。
1. 搭配的英文字型
設定完黑體字型後,跟英文字型的視覺效果能否搭配也是一個學問。最簡單的方法就是只設定中文字型、去除英文字型的設定,那麼網頁在抓英數文字時,仍會去讀取黑體的字型。
只不過,不是每個中文字型的預設英文效果,都能跟中文搭配得很好。如果想要更美、又能搭配黑體的英文字型,可參考這篇「word 預設中英搭配有什麼問題」,來找出更好的選擇。
2. 其他平台
雖然這篇只有提到 Windows 系統的中文字型,不過只要依照同樣的流程,也是能找出其他作業系統(例如 Mac)最適合自己網頁的中文字型,並進行最佳化設定。
3. 個人觀點
由於這篇的範例選擇算是個人觀點,不代表這樣的審美觀一定是好的,也不見得這些選擇適合每個網站,也不一定需要為不同區塊都設定不同字型。
不過本文提供了各種 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 現成字型的圖示與效果,只需要參考範例、及教學連結,相信讀者都能找到自己心目中理想的字型,並成功套用在自己的網站。
網頁字型相關文章: