网页设计常用中文字型：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;
}

---

结语

选对中文字型，不仅能彻底告别「新细明体」带来的破碎廉价感，更能为网站建立清晰、舒服且专业的视觉基调。在跨平台装置百花齐放的今天，善用英文命名、遵循「先英后中」原则并妥善配置字体栈，就能让每一位造访网站的读者，都能获得最佳的阅读体验。