網頁中文字型怎麼設定？font-family 寫法、思源黑體載入，英文佈景主題中文變醜的原因

裝了一套漂亮的英文佈景主題，英文標題很好看，中文卻變成細細的明體，或是筆畫怪怪的、像日文漢字。佈景主題通常沒有壞，問題出在字型清單裡沒有中文字型，瀏覽器只好自己找一個來用。

這篇先說明瀏覽器怎麼挑中文字型（附實際測試結果），再整理常用中文字型的寫法、Google Fonts 思源黑體的載入方式，以及放進 WordPress 的做法。

瀏覽器怎麼挑中文字型

CSS 的 font-family 是一份清單，瀏覽器一個字一個字從清單前面往後找，找到有這個字的字型就用它：

font-family: Georgia, serif;

Georgia 是英文字型，裡面沒有中文字，所以英文字母用 Georgia，中文字往後找到 serif。serif、sans-serif 這種通用名稱沒有指定哪一套字型，意思是「交給瀏覽器決定」，決定的依據是作業系統有哪些字型和網頁標示的語言。

我們在 Windows 的 Chrome 上，用開發者工具查每一種設定實際用到的字型，結果是這樣：

• 網頁語言是繁體中文、字型清單最後是 serif：中文用新細明體。英文佈景主題很多用襯線字型，這就是中文變成細明體的原因。
• 網頁語言是繁體中文、清單最後是 sans-serif：中文用微軟正黑體。
• 同一份 sans-serif 清單，網頁語言標成日文：中文用 Meiryo（日文字型，有些字的寫法和台灣不同）。
• 網頁語言標成簡體中文：中文用微軟雅黑。
• 網頁語言標成英文：結果要看這台電腦裝了哪些字型、系統是什麼語言，每台電腦不一樣。

所以中文網站有兩件事一定要做好：

1. 網頁語言要標對。WordPress 在 設定 → 一般 → 網站介面語言 選「繁體中文」，網頁的 <html> 就會自動變成 lang="zh-TW"。語言代碼要怎麼選，可以看HTML lang 要設 zh-TW 還是 zh-Hant？。
2. 字型清單裡要有中文字型，不要全部交給瀏覽器猜。

常用中文字型的名稱

CSS 裡寫中文字型，建議用英文名稱，名稱有空格要加引號：

• 微軟正黑體："Microsoft JhengHei"（Windows）
• 新細明體：PMingLiU（Windows）
• 標楷體：DFKai-SB（Windows）
• 蘋方（繁體）："PingFang TC"（Mac、iPhone、iPad）
• 黑體（繁體）："Heiti TC"（比較舊的 Mac）
• 思源黑體："Noto Sans TC"（Google 版本的名稱；Android 手機大多內建）
• 思源宋體："Noto Serif TC"

寫中文名稱（例如 "微軟正黑體"）在測試的 Chrome 上也找得到，但英文名稱在各種瀏覽器、作業系統上比較穩定。

推薦的字型清單寫法

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

這樣排的原因：

• 英文字型放前面。英文字型沒有中文字，中文自然會往後找；反過來把中文字型放前面，英文字母也會用中文字型裡那套比較普通的英文。
• 中文字型照「各平台」排：蘋果裝置用蘋方，Android 和有裝思源黑體的電腦用思源黑體，Windows 用微軟正黑體。每個人看到的都是自己裝置上最順眼的那一套。
• 最後一定留 sans-serif，所有字型都找不到時，至少還是黑體類。

不需要另外下載字型，速度最快。缺點是 Windows 和 Mac 看到的字型不一樣。

想讓每台電腦都一樣：載入 Google Fonts 的思源黑體

要讓所有人看到同一套字，就要讓瀏覽器從網路下載字型。中文字型通常是首選思源黑體（Noto Sans TC），Google Fonts 可以免費使用。

放在網頁的 <head> 裡：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&display=swap" rel="stylesheet">

CSS 把它放在清單最前面：

body {
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}

幾個重點：

• wght@400;700 只載入要用的粗細。一般內文 400、粗體 700 就夠了，每多一種粗細，就多一份要下載的字型。
• display=swap：字型還沒下載完之前，先用電腦裡的字顯示，下載好再換過去。不會整頁空白等字型，代價是字會「閃一下」換掉。
• preconnect 讓瀏覽器提早和字型主機連線，字型會早一點開始下載。

中文字型很大，Google 會切成很多小塊

一套中文字型有上萬個字，整套下載動輒好幾 MB。Google Fonts 會把思源黑體切成一百多個小檔，每一塊標明包含哪些字，瀏覽器只下載這一頁用得到的那幾塊。

實際測一個只有 44 個不同中文字的頁面：Google 提供的 CSS 裡，每種粗細有 108 個小檔可以選，瀏覽器實際下載了 8 個，加起來約 480 KB。文字越多、用到的字越雜，下載的塊數就越多。所以就算切成小塊，中文網路字型還是比英文字型重很多，要不要用，值得想一下。

放進 WordPress

方法一：用程式碼載入（傳統和區塊佈景主題都適用）

在子佈景主題的 functions.php，或用 Code Snippets 這類外掛加入這段：

// 載入 Google Fonts 的思源黑體（Noto Sans TC），只載 400、700 兩種粗細
add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_style(
		'zw-noto-sans-tc',
		'https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&display=swap',
		array(),
		null
	);
} );

// 先和字型主機建立連線，字型會早一點開始下載
add_filter( 'wp_resource_hints', function ( $urls, $relation_type ) {
	if ( 'preconnect' === $relation_type ) {
		$urls[] = 'https://fonts.googleapis.com';
		$urls[] = array(
			'href'        => 'https://fonts.gstatic.com',
			'crossorigin' => 'anonymous',
		);
	}
	return $urls;
}, 10, 2 );

• wp_enqueue_style 的最後一個參數 null，是叫 WordPress 不要在網址後面加 ?ver= 版本號，Google 的字型網址加了版本號沒有意義。
• 測試網站在 Twenty Twenty-One 和 Twenty Twenty-Five 兩套佈景主題都確認過：網頁的 <head> 會多出兩行 preconnect 和一行字型樣式表。

還不熟悉 functions.php 的話，可以先看WordPress functions.php 實用程式碼整理，了解要放在哪裡比較安全。

方法二：區塊佈景主題的「字型庫」，中文字型要小心

WordPress 6.5 之後，區塊佈景主題可以在 外觀 → 編輯器 → 樣式 → 排版樣式 → 管理字型 直接安裝 Google 字型，字型檔會下載到自己的主機上。

英文字型這樣裝很方便，中文字型就要注意：字型庫下載的是整套字型，沒有切成小塊。我們查了 WordPress 7.1.3 字型庫裡的 Noto Sans TC，每一種粗細都是一個完整檔案，大小約 2.3～2.8 MB。裝 400 和 700 兩種，訪客第一次打開網頁就可能要下載 5 MB 以上的字型，手機上會明顯變慢。

中文網站如果想用思源黑體，建議用方法一，讓瀏覽器只下載用得到的部分。

把字型套用到整個網站

載入字型之後，還要用 CSS 指定哪裡用這套字，貼在「附加的 CSS」：

body {
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}

實際測試的結果：

• Twenty Twenty-Five（區塊佈景主題）：只設 body，標題、內文、選單、按鈕全部跟著換。
• Twenty Twenty-One（傳統佈景主題）：只設 body 的話，標題、內文、按鈕都沒變，因為這套佈景主題在各個地方另外指定了字型（用 CSS 變數 --global--font-primary、--global--font-secondary）。改這兩個變數才會全部換掉：

:root {
  --global--font-primary: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --global--font-secondary: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}

每套佈景主題的寫法都不一樣。不確定的話，在網頁上按右鍵選「檢查」，選取標題，看右邊「Computed（計算後的樣式）」裡的 font-family 是哪一條規則設定的，就知道要改哪裡。

不建議用 * { font-family: ... } 一次換掉全部。這樣連程式碼區塊的等寬字型也會被換掉，程式碼會對不齊。

幾個小提醒

• 標楷體、新細明體不適合當網頁內文。在螢幕上筆畫細，小字很吃力。想要書法感，用在大標題就好。
• 電腦裡的字型不能直接上傳到網站用。微軟正黑體、蘋方這些系統字型，授權只讓你在自己的電腦上使用。CSS 寫它的名字是用訪客電腦裡的字，沒問題；把字型檔放到網站上讓別人下載，就超出授權了。要用網路字型，請選思源黑體這類開放授權的字型。字型授權的細節可以看網站圖片和字型要有授權。
• 粗細要有對應的字型檔。只載入 400、700，CSS 卻寫 font-weight: 300，瀏覽器只能拿最接近的來用，看起來會和設計稿不一樣。

延伸閱讀

• HTML lang 要設 zh-TW 還是 zh-Hant？繁體中文網站的語言代碼與 hreflang 設定
• 網站圖片和字型要有授權：從網路上隨便抓圖，可能被求償
• CSS 文字左右對齊與行距設定：text-align: justify、line-height 中文排版寫法

字型是網站質感最直接的地方，選對字、載入方式也對，網站才會好看又不拖慢速度。正威網路行銷是 25 年經驗的基隆網頁設計工作室，做網站時會一起規劃字型與排版，台北與全台客戶也歡迎來聊聊。