在 WEB 前端中，字体应如何进行定义？那标准的字体规范 font-family 又是怎样的呢？

需留意系统默认字体和浏览器默认字体之间存在的差异。

直接给出方案：

font:14px/1.6/*西文*/-apple-system,BlinkMacSystemFont,SegoeUI,Roboto,Ubuntu,HelveticaNeue,Helvetica,Arial,/*中文*/PingFangSC,HiraginoSansGB,MicrosoftYaHeiUI,MicrosoftYaHei,SourceHanSansCN,sans-serif;

这些字体究竟是什么？

1、-apple-system, BlinkMacSystemFont：

这两个值属于专门为 iOS 和 macOS(OS X) 所设定的属性值，前者仅能被 Safari 识别，后者仅能被 Chrome 识别。也就是说，它们属于 Webkit 私有属性。这两个值的强大之处在于，能够依据系统版本的不同，呈现出相异的字体。

2、”Segoe UI”, Roboto, Ubuntu：

它们是西文字体的第二梯队，分别对应着：”Segoe UI” 对应 Windows 和 Windows Phone；Roboto 对应 Google 旗下的 Android 和 Chrome OS’；Ubuntu 对应 Linux。

3、Helvetica Neue,Helvetica,Arial：

西文字体的最终兜底选择：”Helvetica Neue”对应 OS X pre-EI Capitan，实际上其位置靠后的关键原因是，它在非 EI Capitan 的机器上是较为常见的字体；Helvetica 是全球通用的经典无衬线体；Arial 自 Windows 3.1 起就一直伴随视窗系统分发，充当最后的回退方案。

4、”PingFang SC”, “Hiragino Sans GB”：

“PingFang SC” 即苹方，是 OS X EI Capitan(10.11) 系统中的中文字体。值得一提的是，在 EI Capitan 上，Chrome 默认的中文字体渲染是 ST Heiti(华文黑体)，而非作为系统 UI 字体的苹方；”Hiragino Sans GB” 即冬青黑体，是我们整个兜底列表中唯一非系统字体。之所以加入冬青黑体，是考虑到无论在 Mac 还是 Windows 上，冬青黑体的表现都优于微软雅黑。而且自 10.6 起，OS X 就已系统自带冬青黑体，所以将其置于微软雅黑之前。

5、”Microsoft YaHei UI”, “Microsoft YaHei”, “Source Han Sans CN”

中文字体的第二梯队：”Microsoft YaHei UI” 即微软雅黑 UI ，伴随 Windows 8.1 一同发布，相较于微软雅黑，其对英文、数字的笔画进行了一定的修改；”Microsoft YaHei” 即微软雅黑，伴随 Windows Vista 一同发布，是 Vista 至 Windows 8 的系统字体（Windows 8.1 改用 “微软雅黑 Light”）；”Source Han Sans CN” 即思源黑体，是大部分 Android 的系统中文字体。

6、sans-serif

中文字体的最终兜底，无衬线体，与中文字体的黑体相对应。

思路是怎样的？

实际上，我们运用系统字体规范 font-family 的思路颇为简单——从西文到中文，针对各个平台进行最基础的降级

一些相关问题:

1. 不声明不就是系统字体吗？

若不声明字体，浏览器渲染的是默认字体，并非一定是系统字体。例如在 macOS 中，Chrome 默认渲染华文黑体（ST Heiti），而非系统字体 苹方（PingFang SC）；在 Windows 7 中，浏览器默认渲染中易宋体（Simsun），而非系统字体微软雅黑（Microsoft YaHei）。

我们标准化的核心思路在于运用系统 UI 字体。

明确声明字体，更为关键的是保障页面样式的安全与可控。比如，我们为 Android 声明英文字体 Roboto 与中文字体思源黑，原因在于 Android 机型繁杂多样。实际上，即便如此，正如我们的测试结果所示，我们仍无法保证所有 Android 机器都能“正确”渲染。正因如此，我们更觉得这样做很有必要。

2. 写得越多就一定更好吗？

回顾知乎的 font-family ：

font-family:'HelveticaNeue',Helvetica,Arial,sans-serif;

写得越多就显得越专业吗？恐怕并非如此。或许正是因为专业、经过深思熟虑，知乎才对字体进行了删减、中文字体仅做了最基本的 sans-serif 限制。即便在 Windows 7 上，这套 font-family 的渲染是 Arial 和 中易宋体（Simsun），即便在 macOS 上英文字体也未使用最新的 San Francisco，但它确实足够安全。

而我们鉴于业务场景的需求，在确保安全的基础上，尽可能优化各个平台的显示效果。所以这一事物，不能单纯以好或坏来评判。

3. 对于设计团队的意义何在？

对于设计师来说：设计师需了解各个平台的字体分布、知晓字体选择的限制以及用户在该平台的基本体验；在实现设计稿时，能够依照所针对的平台，调整设计稿所用的字体，确保设计稿字体与用户最终所见效果保持一致。

对于 UI 工程师而言：要保证各项目字体样式的标准统一；对字体样式的调试要有更清晰的掌控。