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

# PingFang SC 不应该作为移动端网页字体的首选项

![封面图](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2019-11-17-70cc6d2258fa/01.jpg "Photo by Diomari Madulara on Unsplash")

## 一、发现问题

我在公司的电商部门工作，经常会接触到数字、价格，而设计稿也经常会应用在手机 App 或 Web 端上。我在做设计时会经常观察市面上各类应用，途中一个字体使用的问题使我陷入了沉思…

很多时候在 App 内跳转到 Web 页面时，字体（尤其是英文和数字）会有些不同。如图 1–1、1–2：

![网易严选 App 与内嵌 Web 页面的价格字体对比：App 中价格 "¥199" 使用 SF Pro 字体，Web 页面中 "¥919" 使用 PingFang SC 字体，两者字形存在明显差异。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2019-11-17-70cc6d2258fa/02.png "图 1–1 网易严选 App 和内嵌 Web 页面字体差异")

![考拉海购 App 与其内嵌 Web 页面的字体对比：以 `ER` 两个英文字母作为例子，原生 App 里英文字体使用 SF Pro 字体，而 Web 页面则显示为 PingFang SC 字体，两者字形存在明显差异。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2019-11-17-70cc6d2258fa/03.png "图 1–2 考拉海购 App 和内嵌 Web 页面字体差异对比")

## 二、默默观察

本着刨根问底的心态，我也不停地在各类 App、网页上观察用到的字体，发现确实大多数国产 App 和其 Web 页面内的数字、英文字体明显地不一样。

因为中文系统下，iOS 的默认中文字体是 PingFang SC，英文字体是 SF Pro 系列；而在 Web 上前端工程师引用的字体首选项是 PingFang SC。这就导致了所以我们在 Web 端看到的数字、英文字体，其实是 PingFang SC 的字体，跟 iOS 系统默认的 SF Pro 系列存在差异。

所以为了让原生 App 和 Web 的页面看起来更统一，我建议在 Web 页面也引用苹果默认的字体，来代替 PingFang SC 应用在汉字、数字和英文这样一锅端的做法，具体操作如下：

```css
/* 在 font-family 前加入这两个字体选项 */
body {
  font-family:  
  -apple-system,   /*针对 Web 页面*/
  BlinkMacSystemFont,  /*针对 Mac Chrome 页面*/
  ...
}
```

以上代码能确保在浏览器中浏览网页可以看到用 “PingFang SC” 来显示的中文，以及用 “SF Pro”系列来显示的英文、数字。跟 iOS 系统字体保持一致。

## 三、原因

下面写 3 点我认为 Web 中应该将数字、英文设置为 SF Pro，而不是 PingFang SC 的原因。

### 1. 保持 App 内体验统一

通常 Web 页面都是要通过 App 来浏览的，所以让 Web 端内的字体和原生系统上的保持一致，看起来更舒服。如图 3–1 能看到今日头条、马蜂窝的 Web 端页面内字体跟系统字体不一致。

![今日头条与马蜂窝 Web 端截图对比：两者在网页里的数字（11 月、6168）均以 PingFang SC 渲染，与 iOS 系统控件里的字体 SF Pro 不一致，底部 CSS 代码证实两者均未正确配置系统字体优先级，Font-family 第一个值被设为了 `Pingfang SC`。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2019-11-17-70cc6d2258fa/04.png "图 3–1 用微信浏览器打开今日头条和马蜂窝的 Web 端页面")

（顺带说一个彩蛋，今日头条中 font-family 的第一项中 “PingFang” 和 “SC” 少了一个空格，所以没有生效 😂）

而少数派、知乎则保持 Web 端和系统默认字体的统一，如图 3–2。

![少数派与知乎 Web 端截图对比：两者的 CSS font-family 均将系统默认字体（-apple-system、BlinkMacSystemFont）列为首选项，使 Web 页面内的文本字体与 iOS 系统字体保持一致。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2019-11-17-70cc6d2258fa/05.png "图 3–2 用微信浏览器打开少数派和知乎的 Web 端页面")

### 2. SF Pro 系列字体更适合应用在数字、英文上

我们不妨仔细看看 PingFang SC 和 SF Pro 系列字体中数字、英文的差别。

数字字体， SF Pro 会比 PingFang SC 看上去更方、硬，细节更少。而 PingFang SC 看上去还是保留了一些 Helvetica 的味道，“1” 和 “2” 曲线比较明显，如图 3–3。

![PingFang SC 与 SF Pro 数字字形对比：两种字体并排展示 1234567890，以及放大对比 "1" 和"2" 的字形细节——PingFang SC 的 "1" 顶部有衬线弯钩、"2" 曲线弧度更大；SF Pro 字形更方正简洁。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2019-11-17-70cc6d2258fa/06.png "图 3–3 PingFang SC 和 SF Pro 数字字体对比
")

英文字体 SF Pro 比较紧凑，每个字的字宽相对小些，而且曲线细节也没有 PingFang SC 那么多，更适合在屏幕上使用，如图 3–4。

![PingFang SC 与 SF Pro 英文字母对比图，展示完整字母表及 B、G、R 字母放大细节。SF Pro 字形更紧凑、字宽更窄、曲线细节更少，更适合屏幕显示；PingFang SC 保留更多 Helvetica 风格曲线。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2019-11-17-70cc6d2258fa/07.png "图 3–4 PingFang SC 和 SF Pro 英文字体对比")

所以我认为经过苹果官方不断迭代的 SF Pro 系列字体，在对屏幕内数字、英文的表现上总归是要比 PingFang SC 要好一些的。

### 3. SF Pro 系列字体提供更小的空格宽度

我极力推崇使用 SF Pro 的另一个重要原因是：SF Pro 的空格宽度比 PingFang SC 小一些，更适合用在中文和英文、数字混排时的空白中（所谓的“盘古之白”）。我在 Sketch 里量了一下，发现用 PingFang SC 所输入的空格宽度是字体的 1/3，而 SF Pro 字体的空格宽度是字体大小的 1/5（如图 3–5）。

![对比示意图：同为 100px 字号，PingFang SC 的空格宽度为字号的 1/3（约 33px），SF Pro 的空格宽度为字号的 1/5（约 20px），后者更接近 W3C 推荐的四分之一汉字宽间距标准。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2019-11-17-70cc6d2258fa/08.png "图 3–4 PingFang SC 和 SF Pro 字体空格宽度对比")

所以 SF Pro 系列字体更接近 W3C 在[《中文排版需求》](https://www.w3.org/TR/clreq/#mixed_text_composition_in_horizontal_writing_mode)中所提倡的要在英文之间加入 1/4 个汉字宽的空白。（使用 SF Pro Text 更接近）

> 3.2.2 横排的中、西文混排配置
> 横排时，西文使用比例字体；阿拉伯数字则常用比例字体或等宽字体。原则上，汉字与西文字母、数字间使用不多于四分之一个汉字宽的字距或空白。但西文出现在行首或行尾时，则无须加入空白。
> 注：或可使用西文词间空格（U+0020 SPACE [ ]，其宽度随不同字体有所变化）。

不知道大家记不记得即刻 App，还没凉的时候做过一个功能：可以自动在中英文混排的时候自动插入一个小于半角空格的间距，且该功能支持开关。如图 3–6。

![即刻 App 发布新动态界面截图，显示弹窗「喜欢中西文间的空格吗？」，说明 App 可自动在中英文混排时智能插入小于半角空格的间距，并提供「立即启用」选项。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2019-11-17-70cc6d2258fa/09.png "图 3–6 即刻 App 的自动插入空格功能")

现在 iOS 13 和 macOS Catalina 会自动在中英文混排插入一个小于半角空格的间距，所以现在看到的 App 大部分都已经默认有这个效果了，如图 3–7。

![Facebook 和屈臣氏 App 在 iOS 13 前后的对比截图：iOS 13 后，中英文混排时自动插入间距，Facebook 帖文中 "需要 vpn" 与英文间出现空白，屈臣氏地址 "丽丰中心 33 楼" 中文数字间距同样发生变化。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2019-11-17-70cc6d2258fa/10.png "图 3–7 iOS 13 自动为 App 里的中英文混排加上小于半角空格的间距")

## 四、安卓和小程序

众所周知，安卓生态下字体多样，据我观察，在安卓上使用自定义字体的用户远超过 iPhone 用户（在地铁、巴士上观察得出的结论）。一些手机品牌也设计过自己的独有字体，例如小米兰亭、一加莹黑等等。或许安卓也会有网页适应各品牌默认字体的方法，但我目前没找到。

而小程序，根据我和我司的前端工程师沟通得知，需要在 `font-family` 中额外加入一行 `SFProDisplay-Regular` 才能起作用。

```css
body {
  font-family:  
  -apple-system,   /*针对 Web 页面*/
  BlinkMacSystemFont,  /*针对 Mac Chrome 页面*/
  SFProDisplay-Regular, /*针对微信小程序*/
  ...
}
```

## 五、实际应用

![屈臣氏 App 截图对比：左图为优化前，商品价格标签使用非系统字体；右图为优化后，促销组件价格（如 ¥110、¥129）改用系统字体（-apple-system），视觉更贴近原生体验。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2019-11-17-70cc6d2258fa/11.png "图 5–1 屈臣氏 App 首页促销组件新旧对比")

和公司的前端开发工程师沟通后，将首页的促销组件和一些新活动用上了系统字体，舒服了。

## 六、总结

在移动端网页中使用 iOS 系统字体，目前看上去好处甚多，观察了不少互联网公司的产品，比较注重设计感，或一些较精致的的产品会在 Web 端配置更贴近系统的字体，所以在这里推荐大家都开始在网页中使用系统字体吧！

## 参考链接

- [中文网页字体设定2018 - 《网页设计学徒》番外篇 - 程式学徒 ZackLive](https://zacklive.com/chinese-font-family/)
- [中西文中间添加 Thin space U+2009](https://szewei.me/2019/06/20/thin-space/)
- [Requirements for Chinese Text Layout - 中文排版需求](https://www.w3.org/TR/clreq/#introduction)