網頁設計常用中文字型：CSS font-family 跨平台設定與中英文對照指南

在進行網頁設計與前端版面編排時，字型（Typography）的挑選往往是決定整體視覺質感與閱讀體驗的第一道門檻。

對於繁體中文的使用者來說，早期 Windows 系統預設的「新細明體（PMingLiU）」在許多人心中留下了不可磨滅的陰影。在尚未普及高解析度螢幕與字體抗鋸齒技術的年代，細碎發虛的筆畫、不均勻的黑度與粗糙的鋸齒邊緣，讓網頁閱讀變得極為吃力。

如何讓網頁在不同使用者的電腦（無論是 Windows PC、蘋果 Mac 還是行動裝置）上都能呈現清晰、舒適且優雅的中文字體？掌握 CSS 的 font-family 屬性與跨平台字型對應規則，是每位網頁設計師與前端開發者的基本功。

---

CSS font-family 語法與設定心法

在 CSS 中，我們透過 font-family 屬性來定義文字的顯示字體清單。瀏覽器在渲染網頁時，會「由左至右」依序尋找使用者裝置內是否有安裝對應的字型；一旦找到第一個相容的字型，就會直接採用該字體呈現文字。

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

1. 「先英後中」的黃金排序原則

在配置 font-family 時，務必遵守「英文字型在前、中文字型在後」的原則。

原因在於：

• 英文字型（如 Helvetica、Arial、Roboto）通常只包含 ASCII 字符與歐美字母，並沒有收錄漢字筆畫。
• 多數中文字型（如微軟正黑體、新細明體）雖然同時收錄了中文與英文字母，但其內附的半形英數字母在字距、比例與美感上，往往遠不如專門為西文設計的英文字型。
• 當英文字型放在前面時，瀏覽器在遇到英文和數字時會優先套用精美的西文字體；遇到中文時，因為英文字型找不到對應字元，瀏覽器會自然「回退（Fallback）」到後面的中文字型。如此一來便能完美達到中英文各自美化的效果。

2. 空白與中文字名必須加上引號

當字型的名稱包含空白字元（如 Microsoft JhengHei、PingFang TC）或是直接使用中文字元（如 "微軟正黑體"）時，必須使用雙引號 "" 或單引號 '' 包覆。若字型名稱為單一連續英文字（如 Arial、sans-serif），則可省略引號。

3. 優先使用英文系統名稱

雖然現代瀏覽器大多能正確識別中文字型名稱，但在特定舊版系統、非中文語系的瀏覽環境或轉譯處理器中，直接寫中文名稱容易因編碼（如 UTF-8 與 Big5 衝突）而失效。

因此，強烈建議優先使用字型的英文官方名稱（PostScript Name / Font Family Name）。例如設定 "Microsoft JhengHei" 會比單純寫 "微軟正黑體" 具備更高的跨平台相容性與容錯率。

---

通用字型族（Generic Font Family）

在 font-family 清單的最後，一定要加上一個「通用字型族關鍵字」作為最終兜底。當前面所有指定字型在使用者電腦中都找不到時，瀏覽器會以該系統中該類別的預設字型來顯示：

通用字型屬性	中文分類	特色與視覺風格	常見代表字體
sans-serif	無襯線字	筆畫等粗、無轉角裝飾，現代簡約，螢幕閱讀極佳	黑體、蘋方、微軟正黑體、Helvetica
serif	襯線字	筆畫起落有凸出修飾（襯線），古典優雅，具紙本印刷感	明體、宋體、Times New Roman、Georgia
monospace	等寬字	每個字元占據相同水平寬度，排版對齊整齊，適合程式碼	Consolas、Monaco、Courier New
cursive	草書／手寫字	帶有連筆或毛筆、鋼筆手寫隨性感	Comic Sans MS、Brush Script
fantasy	裝飾字	造型誇張具藝術感，通常用於大型標題	Impact、Papyrus

---

主流作業系統內建中文字型對照表

不同作業系統預裝的中文字型完全不同。以下整理了 Mac OS（Apple）與 Windows（Microsoft）常見的中文字型中英文名稱對照表，方便在撰寫 CSS 時精準取用：

1. Mac OS / iOS 常見中文字型

蘋果系統一向以出色的字體渲染與字型美感聞名，系統內建了多款高品質的黑體、宋體與楷書：

中文名稱	英文名稱（PostScript / Family Name）	類型	備註說明
蘋方-繁	PingFang TC	無襯線黑體	現代 macOS / iOS 繁中預設主力字型
黑體-繁	Heiti TC	無襯線黑體	OS X 早期繁中系統預設字型
華文細黑	STHeiti Light（或 STXihei）	無襯線黑體	筆畫細緻，適合副標與引言
華文黑體	STHeiti	無襯線黑體	標準粗細黑體
華文楷體	STKaiti	楷書體	標準毛筆楷書骨架
華文宋體	STSong	襯線宋體	經典明宋體結構
華文仿宋	STFangsong	仿宋體	筆畫挺拔秀麗
儷黑 Pro	LiHei Pro Medium	無襯線黑體	早期經典 Mac 繁中黑體
儷宋 Pro	LiSong Pro Light	襯線宋體	典雅內斂的印刷風宋體
蘋果儷中黑	Apple LiGothic Medium	無襯線黑體	蘋果經典儷中黑
蘋果儷細宋	Apple LiSung Light	襯線宋體	蘋果經典儷細宋
標楷體	BiauKai	楷書體	台灣標準公文楷體

2. Windows 常見中文字型

微軟在 Windows Vista / Windows 7 之後將預設繁中字體全面升級為微軟正黑體，大幅改善了長久以來的螢幕可讀性問題：

中文名稱	英文名稱（PostScript / Family Name）	類型	備註說明
微軟正黑體	Microsoft JhengHei	無襯線黑體	Windows Vista 至今主流繁中無襯線預設字體
新細明體	PMingLiU	襯線明體	比例調和字（Proportional），英數有字距調校
細明體	MingLiU	襯線明體	等寬明體，早期公文系統常用
標楷體	DFKai-SB	楷書體	台灣標準公文必備字型
微軟雅黑	Microsoft YaHei	無襯線黑體	Windows 簡體中文預設黑體
中易黑體	SimHei	無襯線黑體	Windows 簡體中文經典黑體
中易宋體	SimSun	襯線宋體	Windows 簡體中文預設宋體
新宋體	NSimSun	襯線宋體	等寬簡體宋體
仿宋	FangSong（或 FangSong_GB2312）	仿宋體	簡體仿宋
楷體	KaiTi（或 KaiTi_GB2312）	楷書體	簡體楷書

---

實用跨平台 Font Stack 範本推薦

在實際專案中，我們通常不需要把所有字型一股腦塞進去，而是按照「系統層級、西文優先、跨平台主流繁中、兜底備援」的架構來配置。

1. 現代俐落無襯線黑體（最推薦用於內文與介面）

這套設定優先呼叫系統現代原生字體，在 Mac 上會呈現細緻的「蘋方體」，在 Windows 上會自動對應至「微軟正黑體」，英文數字則享受 Helvetica / Arial 的洗鍊感：

/* 跨平台通用繁體中文無襯線字體棧 */
.font-sans-tw {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang TC", "Microsoft JhengHei", "Heiti TC", "LiHei Pro", sans-serif;
}

2. 文藝典雅襯線宋體（適合散文、文化副刊與閱讀型網站）

想要呈現紙本書籍的厚重底蘊或人文氣息時，襯線字是極佳的視覺載體：

/* 跨平台繁體中文襯線字體棧 */
.font-serif-tw {
  font-family: Georgia, "Times New Roman", "Songti TC", "STSong", "LiSong Pro", "PMingLiU", serif;
}

3. 程式碼與數據表格等寬字體（Monospace）

在展示程式碼區塊（Code Block）或需要垂直數字完全對齊的會計表格時，等寬字體能確保版面整齊不位移：

/* 跨平台等寬字體棧 */
.font-mono-tw {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
}

---

結語

選對中文字型，不僅能徹底告別「新細明體」帶來的破碎廉價感，更能為網站建立清晰、舒服且專業的視覺基調。在跨平台裝置百花齊放的今天，善用英文命名、遵循「先英後中」原則並妥善配置字體棧，就能讓每一位造訪網站的讀者，都能獲得最佳的閱讀體驗。