2014年8月1日 星期五

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

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

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

前陣子 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 現成字型的圖示與效果,只需要參考範例、及教學連結,相信讀者都能找到自己心目中理想的字型,並成功套用在自己的網站。


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

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP