细数 Pingfang SC 的七宗罪

Pudge李瑞东
·
(修改过)
·
IPFS
Source: Dmitry Novikov
本文 2022 年 1 月 17 日首发于 Medium · 查看原文 

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

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

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

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

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

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

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

罪名一:默认触发连字

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

连字效果通常用在衬线体或手写体上,而 Pingfang SC 作为一款无衬线字体,默认触发了连字效果,很多时候并不是我们预期内的效果(笔者甚至主观地认为非常难看)。所以,我们还需要额外使用font-variant-ligatures: none; 来禁用 Pingfang SC 的连字。

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

罪名二:不支持本地化字型

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

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

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

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

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

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

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

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

罪名三:缺少字重

在 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 也是全方位落后于系统字体。

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

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

罪名四:不支持比例数字与等宽数字的切换

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

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

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

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

想了解关于比例数字和等宽数字的更多资料,不妨去去看看我在 2020 年写的《等宽数字 Monospaced Numbers 在界面中的使用》。里面详细介绍了两种数字的具体差别、使用场景以及实现方式。

罪名五:不支持冒号居中

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

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

罪名六:不支持垂直标点

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

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

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

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

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

罪名七:不是系统字体

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

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

尝试洗地

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

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

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

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

这里我有必要说明下这个设置起到了哪些作用。

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

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

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

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

那么有没有必要为了这个好处,而承受用 Pingfang SC 带来的种种缺点呢?真是一个耐人寻味的问题呢,蛤蛤。

随想

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

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

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

参考链接

可变字体 - 维基百科,自由的百科全书
对于可变字体技术的探索始于20世纪90年代。Adobe曾于1991年推出技术,苹果也随后推出TrueType…zh.wikipedia.org

PingFang SC 不应该作为移动端网页字体的首选项
我在做设计时会经常观察市面上各类应用,途中一个字体使用的问题引起了我的兴趣。pudge1996.medium.com

等宽数字 Monospaced Numbers 在界面中的使用
在上一篇文章的3.2章节里,提到了 AntD 组件会全局默认使用等宽数字。这对我来说是比较新的概念,所以也花了点时间观察、总结了等宽数字在界面上的几个使用场景,以及普遍的实现方式,正好也可以作为文章记录下来。pudge1996.medium.com

PingFang SC 不应该作为移动端网页字体的首选项
我在公司的电商部门工作,经常会接触到数字、价格,而设计稿也经常会应用在手机 App 或 Web 端上。我在做设计时会经常观察市面上各类应用,途中一个字体使用的问题使我陷入了沉思... 很多时候在 App 内跳转到 Web…lrd.im

CC BY-NC-ND 2.0 授权

喜欢我的作品吗?别忘了给予支持与赞赏,让我知道在创作的路上有你陪伴,一起延续这份热忱!

Pudge李瑞东中国广州 · UI 设计师 个人网站:lrd.im 联系邮箱:lrdbuff@gmail.com
  • 来自作者
  • 相关推荐

博客实现 RSS 订阅能力全记录

网页布局设计和适配(分享会文稿)

App 表单校验时机探索