# 中文字体栈怎么写

> 适合谁看：要给中文网站写 `font-family` 的前端开发者，不管有没有用网页字体。

## 字体栈是什么

`font-family` 可以写一串字体名，浏览器从左到右找，**逐个字符**判断：第一个字体里没有这个字，就用下一个字体显示这个字。所以字体栈既是「首选不在时的备选」，也是「首选缺字时的补字」。

## 常见系统中文字体

| 系统 | 黑体类 | 宋体类 | 楷体类 |
|---|---|---|---|
| macOS、iOS | PingFang SC（苹方） | Songti SC（宋体-简） | Kaiti SC（楷体-简） |
| Windows | Microsoft YaHei（微软雅黑） | SimSun（宋体） | KaiTi（楷体） |
| Android | 系统自带，通常是 Noto Sans CJK / 思源黑体，部分厂商用自家字体 | 视机型而定 | 视机型而定 |
| Linux 桌面 | Noto Sans CJK SC、Source Han Sans SC、WenQuanYi Micro Hei 等 | Noto Serif CJK SC 等 | 视发行版而定 |

不同系统版本、不同厂商的预装字体有差别，上表只是常见情况。macOS 上的部分字体需要在「字体册」里下载后才能用。

## 推荐写法

**黑体类：**

```css
font-family: "网页字体名", -apple-system, "PingFang SC", "Hiragino Sans GB",
  "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
```

**宋体类：**

```css
font-family: "网页字体名", "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC",
  "SimSun", serif;
```

## 几个要点

- **西文字体写在中文字体前面**，可以让英文、数字用西文字体，中文落到后面的中文字体上。反过来写，中文字体自带的西文会被用上。
- **最后一定要写通用族名**：`sans-serif`、`serif`、`monospace`。
- **名字有空格要加引号。**
- **英文名比中文名可靠。** 部分浏览器和系统只认英文名，写了中文名（如「微软雅黑」）可以和英文名并列，但不要只写中文名。
- `system-ui` 会用系统界面字体，在中文环境下效果因系统而异，用在界面组件上比用在长文正文上更合适。

## 缺字的情况

生僻字、新收录的扩展区汉字，系统字体也可能没有。要保证这些字能显示，可以在字体栈末尾加一款覆盖范围大的字体，见[《网页和系统里怎么显示生僻字》](https://docs.cocobook.com/link/1284)。

<p style="margin-top:2.5em;padding-top:.6em;border-top:1px solid #e6e6e6;font-size:.85em;color:#8a8a8a"><a href="https://docs.cocobook.com/link/1307#bkmrk-src-w07-stack" style="color:inherit;text-decoration:none;border-bottom:1px dotted #bbb">参考资料</a></p>