不要将 PingFang SC 带到网页中

现状

我工作中遇到的很多代码中，CSS 文件里都有一行 font-family: "PingFang SC";，哪怕 IDE 会提示你“这里缺少通用的字体族回退！”，它也依然会被留在那里。虽然大多数时候它不造成任何麻烦，但它绝对算不上合理甚至无害，不值得我们无视。

缘由

这一行 CSS 代码，毫无疑问是从 Figma 或 Sketch 设计稿中复制过来的。以 Figma 举例，设计师（使用 Mac 电脑）为了让默认以日文字体渲染的文字显示正常，设定了字体「PingFang SC」。这一行紧接着会出现在 Figma 生成的 CSS 代码中，遂被研发复制顺手带到了项目代码中。之后通过了一切代码规范检测和 Code Review，它就进入了生产环境到了用户的屏幕上。

问题

强制指定 PingFang SC 会带来两个核心问题：

• 仅 Apple 平台预装：PingFang SC 是 Apple 系统中的简体中文字体，在 Windows、Android、Linux 等其它平台中不存在，所以对于其它平台，这一行没有意义。
• 西文与数字显示丑陋：这是最影响体验的一点。苹方字体中内嵌的西文和数字，并非为正文显示设计，其字形、字重和间距都相当糟糕，在 Mac 上会覆盖掉体验更优的默认西文字体 (San Francisco)。这导致页面上的数字和英文内容变得非常难看，可读性差，破坏了页面的视觉一致性。
  
  我将英文网站 Yahoo Finance 和 Apple Developer 手动改成了 PingFang SC，可以清晰地看出可读性差异（左侧为PingFang SC）：
  
  
  
  

覆盖面

在简体中文网站

几乎所有大型的简体中文网站都有这个问题，例如 Bilibili、腾讯网、网易新闻等。对于使用 Windows 的用户不会有影响，而 Mac 用户则收获了效果更差的西文和数字。

在国际化网站

另外，对于需要服务全球用户的产品，这个问题会变得更加严重，直接影响产品的专业形象。

例如腾讯云国际站（英文版）：

在其日文版中，字体依旧与英文版相同，也没有声明正确的 lang 属性。日文汉字被渲染成了简体中文字形，可以推测其对所有语言都套用了同一个 font-family 属性，对于一个国际化网站这是不可接受的。

我随机挑选了几个国际化的中国网站（不同地区并非彼此独立的网站），其字体配置规范如下：

可以看到，大多数国际化的网站均声明了 lang 属性，一些重视展示效果的网站挑选或定制了字体，只有少数网站依然套用简体中文字体。

字体的最佳实践

最简单且有效的做法是，将字体交还给系统，让系统去判断在当前语言环境下应该使用哪个字体。一个推荐的跨平台字体栈如下：

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

这组声明会优先使用各平台的原生 UI 字体，并提供了足够的回退选项。无需加入任何中文字体，只要 HTML 声明了 lang="zh-CN"，浏览器就会在渲染中文时调用系统默认中文字体（如苹方、微软雅黑），同时西文和数字依然由体验更优的系统西文字体渲染。

详情可看《网页开发中的汉字字体规范》。

总结和想法

PingFang SC 的使用已经形成了中国的互联网产品的特色，但其奇妙地起源于设计软件的 CJK 文字渲染的字体优先级问题，设计师为了让设计稿中的文字在 Mac 上显示正常，使用了 PingFang SC，而研发在复制代码时忽略了这一行代码的意义。

于是我们见到不论网页或 App，不论英文、数字还是日文的世界，都盘踞着 PingFang SC 的身影。尽管它不合理，但秉持着“能用就行”的态度，以及归功于成型网站的 CSS 已被覆盖到全局所以无人敢改的现状，PingFang SC 扎根于许多中国互联网产品中，在众多新需求和更急迫的 bug 面前，字体好不好看，就被忽略了。

推荐文章

• 细数 PingFang SC 的七宗罪 - 李瑞东
• PingFang SC 不应该作为移动端网页字体的首选项 - 李瑞东
• 当你以为自己用的是苹果系统字体 - 少数派