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

Image for post
Image for post
Photo by Diomari Madulara on Unsplash

一、发现问题

Image for post
Image for post
图 1–1 网易严选 App 和内嵌 Web 页面字体差异
Image for post
Image for post
图 1–2 考拉海购 App 和内嵌 Web 页面字体差异对比

二、默默观察

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

三、原因

1. 保持 App 内体验统一

Image for post
Image for post
图 3–1 用微信浏览器打开今日头条和马蜂窝的 Web 端页面
Image for post
Image for post
图 3–2 用微信浏览器打开少数派和知乎的 Web 端页面

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

Image for post
Image for post
图 3–3 PingFang SC 和 SF Pro 数字字体对比
Image for post
Image for post
图 3–4 PingFang SC 和 SF Pro 英文字体对比

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

Image for post
Image for post
图 3–4 PingFang SC 和 SF Pro 字体空格宽度对比
3.2.2 横排的中、西文混排配置横排时,西文使用比例字体;阿拉伯数字则常用比例字体或等宽字体。原则上,汉字与西文字母、数字间使用不多于四分之一个汉字宽的字距或空白。但西文出现在行首或行尾时,则无须加入空白。注:或可使用西文词间空格(U+0020 SPACE [ ],其宽度随不同字体有所变化)。
Image for post
Image for post
图 3–6 即刻 App 的自动插入空格功能
Image for post
Image for post
图 3–7 iOS 13 自动为 App 里的中英文混排加上小于半角空格的间距

四、安卓和小程序

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

五、实际应用

Image for post
Image for post
图 5–1 屈臣氏 App 首页促销组件新旧对比

六、总结

参考文章

Written by

UI 设计师 · 学院派 · 广州 · LRD.IM

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store