> ## 文章索引
> 在这里获取全部文章的索引：https://lrd.im/blog/llms.txt
> 这是 lrd.im 的个人博客，记录设计、技术与思考。

# 细数 Pingfang SC 的七宗罪

![封面图](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2022-01-17-8a5738fc2340/01.png "Source: Dmitry Novikov")

2019年11月17日，我发布了一篇名为《[PingFang SC 不应该作为移动端网页字体的首选项](/blog/2019-11-17)》的文章，这是我目前为止阅读量最大的文章。还记得那时候我刚毕业在屈臣氏的移动电商部门工作，发现了网上流传的 “字体用苹方” 的说法并不靠谱，并写下了自己的看法。

我经过这几年工作，接触了更多的场景，发现了更多不应该在网页中使用 Pingfang SC 的理由。所以通过阅读这篇文章，读者们会认识到 Pingfang SC 作为网页字体的更多缺点。以及对比之下，用系统字体作为网页字体的优点。

作为专业的 Pingfang SC 字体 Hater，这里需要界定清楚概念，并且假定一个场景是：用户正在使用 Apple 设备，且没有在浏览器的设置里设置过其他网页默认字体。

下文提到的 “Pingfang SC 字体”，指的是以下的 font-family 设置：

```css
font-family: Pingfang SC, sans-serif; 
/* 网页在 Apple 设备内的中文、英文、数字、空格及标点符号，使用 Pingfang SC 字体。 */
/* 非 Apple 设备下，没安装该字体则不生效，使用浏览器所设置的无衬线字体（该场景不在这次讨论范围）。 */
```

下文提到的 “系统字体”，指的是以下的 font-family 设置：

```css
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
/* 网页在 Apple 设备内的中文和中文标点符号，使用 Pingfang SC 字体。 */
/* 网页在 Apple 设备内的英文、数字、空格以及英文标点符号，使用 Apple 设备的默认字体(即 SF 系列字体)。 */
/* 非 Apple 设备下，使用浏览器所设置的无衬线字体（该场景不在这次讨论范围）。 */
```

![对比图：使用 Pingfang SC 字体时，中英文混排全部采用同一字体；而使用系统字体（-apple-system）时，中文使用 Pingfang SC，英文、数字及英文标点改用 SF 系列字体渲染。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2022-01-17-8a5738fc2340/02.png)

## 罪名一：默认触发连字

单词中出现 “fi” 时，Pingfang SC 字体会默认触发连字，对比效果如下图。

![对比图：使用 Pingfang SC 字体时，Benefits、Official、Affiance 中的 "fi" 字母组合被自动合并为连字（字形相连，以紫色下划线标注）；而使用系统字体时，"fi" 保持独立字形，无连字效果。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2022-01-17-8a5738fc2340/03.png)

连字效果通常用在衬线体或手写体上，而 Pingfang SC 作为一款无衬线字体，默认触发了连字效果，很多时候并不是我们预期内的效果。所以，我们还需要额外使用`font-variant-ligatures: none;` 来禁用 Pingfang SC 的连字。

调研了部分国外网站，发现 “ff” 里触发连字还算常见，但 “fi“ 处换行，实在是比较少。

![四张国外无衬线字体网站截图：美国政府网站、英国政府网站、牛津词典、华尔街日报，均未在 "fi" 处触发连字换行，说明该做法在国外主流网站中极为罕见。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2022-01-17-8a5738fc2340/04.png)

## 罪名二：不支持本地化字型

经常去港台地区浏览网页的读者，不难发现，港台地区使用的是繁体中文，而且标点是在中间的。

![简体字与繁体字网页对比截图：简体网页标点符号紧贴前字，繁体网页标点符号居中显示，且部分汉字笔画写法存在差异，体现了简繁体网页在排版风格上的不同。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2022-01-17-8a5738fc2340/05.png)

除了标点是显而易见的不同，这里我着重说下文字的不同。其实简体和繁体，都分好几种地区。会出现一种情况是简繁体在各个地区里，是同一个字，但笔画略有不同。

![对比图：同一组汉字 "以及、清流、深漂、元老" 在简体中文（中国）、繁体中文（香港）、繁体中文（台湾）三种字型下的笔画差异，部分字的写法明显不同。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2022-01-17-8a5738fc2340/06.png)

在网页触发这个特性，需要同时满足两个条件：

1. 网页中 `lang` 标签设置为该地区；
2. 字体支持该地区的字型。

第一个条件没啥问题，比如台湾繁体的网页，会被设置为 `lang="zh-TW"` 或 `lang="zh-hant-tw"` 等，网上流传多种设置方案，这里不探讨哪种是对的，只是示意 `lang` 标签需要设置为对应的地区。

而第二个条件，需要字体的支持。如果 font-family 里的字体不支持某个繁体写法的汉字，那么即使设置对了 lang 标签也不会生效，因为加载的字体文件里就没有对应的汉字。

不出意外地，Pingfang SC 并不支持这种本地化文字的展示，因为后缀是 ”SC“，即 ”Simplified Chinese“，这款字体只会用大陆的简体，不支持文字的本地化字型，所以对多语言的支持特别不友好。

而使用系统字体的做法，则能根据网页的语言标签，自动展示对应的本地化字型，对比如图，高下立判。

![对比图：Pingfang SC 字体在简体中文、繁体中文（香港）、繁体中文（台湾）三种语言下字形完全相同；而系统字体能根据语言标签自动切换对应本地化字形，三者存在明显差异。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2022-01-17-8a5738fc2340/07.png)

## 罪名三：缺少字重

在 CSS 的常规情况下字重可以设置为从 100~900，每隔 100 为一档。平常我们所谓的“常规字重”，对应到 CSS 里，则是 `font-weight: 400;` 或 `font-weight: normal;`。

Pingfang SC 下的数字、英文、英文标点符号，只支持 100、200、400、500、600。

而系统字体的做法，数字、英文、英文标点符号支持 100~900 所有字重。所以在字重方面，Pingfang SC 字体又有一个不足之处。虽然平常现实中不会 9 种字重都用上，但没有就是没有，需要用到的时候就会在预期之外。

![字重支持对比图：Pingfang SC 仅支持 100、200、400、500、600 五档字重，而系统字体支持 100 至 900 全部九档字重，系统字体覆盖范围明显更广。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2022-01-17-8a5738fc2340/08.png)

除了缺少了几个字重，在字重的功能上，Pingfang SC 也是全方位落后于系统字体。

同时系统字体属于 “OpenType 可变字体”，支持 OpenType 高级排版功能，其中一项功能可以允许自由变化字重，而并非以往上文提到的 “每隔 100 为一档”。这个功能用在字重有动画变化的场景时，能起到自然过渡的效果。

所以系统字体在使用 OpenType 高级排版功能的时候，就拥有 1~1000 的自由字重变化。这个功能在 Pingfang SC 字体上是没有的。

![系统字体自由字重示例：通过 CSS font-variation-settings 属性，可将字重精确设置为任意值（如 510、555、589），实现平滑过渡，而非传统的每隔 100 一档。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2022-01-17-8a5738fc2340/09.png)

## 罪名四：不支持比例数字 & 等宽数字切换

不知道大家有没有留意到，数字的宽度有两种做法，一种是根据字型的比例（比例数字），另一种是强制每个数字都是等宽（等宽数字）。

比例数字通常用在从左到右，常规的文本里面，就好像英文字母一样，高矮胖瘦，各有不同。而等宽数字，则常用在从上到下，需要纵向对比的场景，比对数字大小。

![比例数字与等宽数字对比示意图：同为 "1207"，比例数字中各字符宽度不一（下划线长短各异），等宽数字中每个字符占相同宽度（下划线等长对齐）。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2022-01-17-8a5738fc2340/10.png)

在网页中，我们可以用 CSS 来控制展示哪种类型的数字，前提是需要当前字体支持比例数字或等宽数字。

Pingfang SC 里面默认是用比例数字，而且没有等宽数字的字型，所以比起系统字体，又少了一项功能。

![对比图：Pingfang SC 的比例数字与等宽数字视觉相同，说明不支持等宽数字切换；而系统字体的等宽数字明显比比例数字更宽，两种样式差异清晰可辨。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2022-01-17-8a5738fc2340/11.png)

想了解关于比例数字和等宽数字的更多资料，不妨去去看看我在 2020 年写的[《等宽数字 Monospaced Numbers 在界面中的使用》](http://lrd.im/blog/2020-12-25-e454336ec5b7.html)。里面详细介绍了两种数字的具体差别、使用场景以及实现方式。

## 罪名五：不支持冒号居中

当两个数字中间出现了一个英文冒号时，系统字体会自动将冒号的位置往上移，大约在与文字垂直居中的位置。这个也是当时 SF 系列字体刚发布时，被人们津津乐道的细节。

很可惜，Pingfang SC 并没有继承这个优点，在两个数字中间的冒号并不会垂直居中。

![对比图：左侧 Pingfang SC 字体中，"06:25" 和"09:41" 的冒号未垂直居中；右侧系统字体中，冒号自动上移至数字垂直居中位置，视觉更为协调。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2022-01-17-8a5738fc2340/12.png)

## 罪名六：不支持垂直标点

其实这条罪名是跟第五条有点关系，只是因为在系统字体中，冒号居中是自动的行为，接下来说的内容需要通过 CSS 开启，所以我分开来列举。

通过前一段时间的国际化多语言适配专项的学习，我粗浅地了解到，原来在英文字母纯大写或电话号码的场景里，是可以使用垂直标点来提升视觉体验的，如下图所示：

![对比图展示 Case Sensitive Forms（垂直标点）效果：左侧默认状态下，+(86)10086、12*4、$7.99/个 中的括号和星号位置居中偏下；右侧开启垂直标点后，标点符号垂直居中对齐，视觉更协调。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2022-01-17-8a5738fc2340/13.png)

注：”垂直标点“ 的英文名是 “Case sensitive Forms”，由于我没有在网上找到这个做法的中文名，本文暂时就用 ”垂直标点“ 来代替了。

开启垂直标点特性的前提，要配置 CSS 属性 `font-feature-settings: 'case' on;`，且需要字体支持。

这么高级的功能自然也不会跟 Pingfang SC 有半点关系，对比图也就没必要放出来了。

## 罪名七：不是系统字体

最后一条罪名， Pingfang SC 的英文、数字、标点符号，与 Apple 设备原生的字体不同。导致会出现的情况是，系统内的字体，和网页内的字体不一致，凭空多了一种字体。

![对比图：左侧为设计软件中 Pingfang SC 字体显示 "2880 × 1880"，右侧为 macOS 系统截图显示 "2880 × 1800"，两者数字字形明显不同，说明 Pingfang SC 与系统原生字体存在差异。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2022-01-17-8a5738fc2340/14.png)

以上从理性和感性的角度列了七条 Pingfang SC 对比起系统字体的缺点。通过上面内容，相信读者都能够对 Pingfang SC 和系统字体的差异有了新的认识。

## 另外一面

凡事都有两面性，数了 Pingfang SC 字体的这么多宗罪，我尝试抱着欣赏的心态，倒是也想到了一个有理由在网页中用这款字体的好处：

> 防止用户自行修改改过浏览器默认字体，使得网页阅读体验不佳。

文章开头的定义里面，提到系统字体的 font-family 设置是：

```css
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
```

这里我来说明下这个 CSS 设置起到了哪些作用。

首先前两个字体，是只对苹果设备里的英文、数字、空格和标点符号起作用，使用的是 SF 系列字体，并不包含中文和中文标点（CJK 字符）。

最后一个字体，`sans-serif` 指向的是浏览器字体设置里面的无衬线字体。

即如果用户特意跑进浏览器设置里，将无衬线字体设置成了宋体（如下图），那么在上面那串 CSS 代码的作用下，界面里的英文、数字、空格和标点符号会用 SF 系列字体；而中文和中文标点，则使用的是宋体。

![浏览器字体设置界面截图，显示 Sans-serif 字体被设置为「宋体-简」，宽度固定的字体为 Courier，示意用户可手动修改浏览器默认无衬线字体。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2022-01-17-8a5738fc2340/15.png)

所以如果用前文提到的 Pingfang SC 做法，可以确保不管用户在浏览器里设置了什么字体，都同一展示 Pingfang SC（前提是苹果设备，或有安装该字体的非苹果设备）。

## 随想

不吐不快，这次专门用一片文章记录了 Pingfang SC 的种种缺陷，有些是很早以前就知道的，比如说字重、等宽数字、冒号居中，有些则是在最近加入的新公司里，随着项目经验的丰富而了解到的，比如连字、文字本地化、垂直标点等等。

“垂直标点” 这个概念对我来说很新，我觉得之后还会专门出一篇文章来介绍网页里的标点，但我还需要了解到更多。

> 2022-05-14 更新：已经完成一篇介绍 “垂直标点” 的文章：[《高级排版功能：Case-Sensitive Forms 是什么？》](https://lrd.im/blog/2022-05-14)

之前的工作不会涉及到出海业务，所以对网页字体的了解还是太片面，平常只关注到中文的展示效果。来到欢聚集团工作之后，接触到我之前一直很感兴趣的国际化、本土化领域，有了接触各国语言场景的机会，自身的认知也提高不少。国际化、本土化和 OpenType 高级排版的领域很大，还是得继续学习吧~

## 参考链接

- [可变字体 - 维基百科，自由的百科全书](https://zh.wikipedia.org/wiki/%E5%8F%AF%E5%8F%98%E5%AD%97%E4%BD%93)
- [PingFang SC 不应该作为移动端网页字体的首选项 - 李瑞东 LRD.IM](https://lrd.im/blog/2019-11-17)
- [等宽数字 Monospaced Numbers 在界面中的使用 - 李瑞东 LRD.IM](https://lrd.im/blog/2020-12-25)