2014年8月25日

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

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


更多字型相關文章:

15 則留言:

  1. 用日文/簡體字型最明顯的缺點,就是標點不會置中了。
    像這部落格用メイリオ當主要的內文字型,就只看得到擺在底下的逗點和句號。

    至於這篇的標題…好像一開始就是用英數逗號吧

    回覆刪除
  2. 也可以買字(沒有利益關係存推 P.S 我也沒用 )
    justfont就是字,中文字型web font服務,網頁字型,網路字型,雲端字型,中文字型,字型知識,信黑體,字型下載
    http://www.justfont.com/

    微軟相當多的字在Linux上都沒有,我都是透過這類行的東西來改字
    MingLan Style for Firefox(火狐明蘭體樣式) - userstyles.org
    https://userstyles.org/styles/100353/minglan-style-for-firefox

    回覆刪除
  3. <265299977364713552>(以上內容請勿刪除,從括號之後開始留言)好看的字大部分都不是免費的,Justfont上的書刻體當標題時效果一流,不過真訂下去,每月的支出開銷也不小吧。
    Linux另外有字體映射可以用,不見得要用到font-face。況且Firefox對unicode-range的支援也不完整,不能單獨只設定英文範圍

    回覆刪除
  4. <265299977364713552>(以上內容請勿刪除,從括號之後開始留言)[quote]也可以買字...微軟相當多的字在Linux上都沒有[/quote]這兩件事上一篇的內容說明過了,請參考文中連結即可。
    [quote]MingLan Style for Firefox[/quote]這只有自己的 FF 才看得到,別人的 FF 看不到、你的網站讀者也都看不到喔~建議先讀過上一篇的概念。

    回覆刪除
  5. 您好,我在網路上試過其他方法後,僅能將一些標題做更改。我的內文文章始終無法全數變更為我想要的字體。變成我必須要進入文章內的html一個個去修改成我要的字體。但看過您的內文,有嘗試過找您所說的post-body,但未從htmal內找到此語法,請問是語法內的標示不同?還是我必須另外新增呢?可否請教您是否有其他方法能簡易的將blog內的所有文章一次修改成想要的字體呢?而我使用的是mac電腦,目前設定的字體是Hiragino Sans GB,謝謝您
    我的blog網址是:http://hsianching.blogspot.tw

    回覆刪除
  6. 您好,後來有看到您的另一篇“網頁中英文字型(font-family)跨平台設定最佳化”裡的語法直接貼上修改,瀏覽後依然沒辦法做字體變更,不知道問題是出在哪裡了?即使直接使用您的語法,瀏覽後也一樣沒有改變。可以請教如何處理嗎?謝謝

    回覆刪除
  7. <5088126499574141985>(以上內容請勿刪除,從括號之後開始留言)原來是你的留言被系統判定為垃圾留言了,所以才無法顯示,原因請見下方的留言注意事項,不過沒關係,我已將主要的留言內容恢復,重複的留言去除。

    看了你的網頁,大概知道是什麼情形,可能你習慣用其他的編輯器(例如WORD),那麼將內容複製到Blogger文章編輯器時,就可能發生文章內的字型都已經被內定,所以無法藉由外部的 CSS 設定來改變。幾點建議:

    1. 參考「部落格寫作軟體的選擇」:http://www.wfublog.com/2016/01/blog-writing-software-post-auto-backup-solution.html → 將來改用推薦的軟體、或純文字編輯軟體,或是在編輯軟體就將你要的字型設定好。

    2. 看了你的網站,文章有一百多篇,時間允許的話,就一篇篇進去修改字型。

    3. 想要省時間的話,只能寫客製程式強制覆蓋文章的字型,請參考這個頁面 http://www.wfublog.com/2013/06/service-suggest-cooperation.html →「2. 商業客製諮詢」,有需要可用該頁面的聯絡表單與我聯繫。

    回覆刪除
  8. 作者已經移除這則留言。

    回覆刪除
  9. 請問Wayne大Blogger可以做到像以下網站功能,轉換成客製化字體呢?謝謝 https://hearty.me/nien

    回覆刪除
  10. <2194811141417475735>(以上內容請勿刪除,從括號之後開始留言)網路有一些 "付費網頁字型" 的服務,你可以google關鍵字找找看

    回覆刪除
  11. 您好:想詢問一下,游黑體是免費的商用字型嗎?是否可用於網頁banner圖檔中呢?謝謝您。

    回覆刪除
  12. <7644775735707764015>(以上內容請勿刪除,從括號之後開始留言)這是作業系統附帶的字型,而作業系統是要錢的喔~你要用在圖檔,可以 google 免費字型

    回覆刪除
  13. <5101535224347523851>(以上內容請勿刪除,從括號之後開始留言)
    好的~謝謝您~所以也不能使用在logo上囉?

    回覆刪除
  14. 請問有類似康熙字典體的中文字體嗎?
    還有,設定的字體是要使用者電腦上有字體檔使用者才看得到?
    如果是的話有辦法強制讓使用者看到設定的字體嗎?

    回覆刪除
    回覆
    1. "請問有類似康熙字典體的中文字體嗎?" → 請 google 免費中文字型

      "設定的字體是要使用者電腦上有字體檔使用者才看得到? 如果是的話有辦法強制讓使用者看到設定的字體嗎?" → 參考「讓網頁顯示特定中文字型﹍安裝實作教學」: http://www.wfublog.com/2015/07/chinese-custom-font-on-web.html

      刪除

張貼留言注意事項:

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