最标准的系统字体规范font-family注意系统默认字体和浏览器默认字体的区别。直接提供解决方案：font:14px/1.6/*Western*/-apple-system,BlinkMacSystemFont,SegoeUI,Roboto,Ubuntu,HelveticaNeue,Helvetica,Arial,/*Chinese*/PingFangSC,HiraginoSansGB,MicrosoftYaHeiUI,微软雅黑,SourceHanSansCN,sans-serif;这些是什么字体？1.-apple-system，BlinkMacSystemFont：这两个值是iOS和macOS（OSX）专门使用的属性值。前者只有Safari能识别，后者只有Chrome能识别。也就是说，它们是Webkit的私有属性。这两个值的厉害之处在于，它们会根据不同的系统版本渲染出不同的字体。2、“SegoeUI”、Roboto、Ubuntu：西方字体第二梯队，对应：“SegoeUI”对应Windows、WindowsPhone；Roboto对应谷歌的Android和ChromeOS；Ubuntu对应的是Linux。3.HelveticaNeue、Helvetica、Arial：西方字体的最终回落：“HelveticaNeue”对应OSXpre-EICapitan，其实更重要的原因是它在非EICapitan上的定位machine是比较常见的字体；Helvetica是世界通用的经典无衬线字体；Arial是从Windows3.1开始就随Windows系统分发的一种字体，作为最后的后备方案。4、“PingFangSC”、“HiraginoSansGB”：“PingFangSC”表示Pingfang，是OSXEICapitan(10.11)系统中文字体。值得一提的是，Chrome在EICapitan上默认渲染的中文字体是ST黑体（中文黑体），而不是作为系统UI字体的屏方；系统字体的字体。之所以加入HollyHeibody，是因为考虑到无论是在Mac还是Windows，HollyHeibody的性能都会优于微软雅黑。而从10.6开始，OSX自带了HollyHeibody，所以它被放在了MicrosoftYahei之前。5、“微软雅黑UI”第二梯队，“微软雅黑”，“源汉无字CN”中文字体：“微软雅黑UI”为微软雅黑UI，随Windows8.1一起发布。与微软雅黑相比，对英文和数字的笔画做了一些修改；“MicrosoftYaHei”即MicrosoftYaHei，与WindowsVista一起发布，是Vista到Windows8的系统字体（Windows8.1使用“MicrosoftYaHeiLight”）；“SourceHanSansCN”即思源黑体，是大多数Android系统的系统中文字体。6、sans-serif中文字体的最终回退，sansserif，对应中文字体的黑体。什么想法？其实我们使用系统字体规范的font-family的思路很简单——从西文到中文，针对每个平台做一个基础降级。一些问题：1.不声明不就是系统字体吗？当没有声明字体时，浏览器呈现默认字体，不一定是系统字体。例如，在macOS上，Chrome默认呈现ST黑体，而不是系统字体PingFangSC；在Windows7上，浏览器默认呈现Simsun而不是系统字体MicrosoftYaHei。我们标准化的核心思想是使用系统UI字体。显式声明字体，更重要的是保证页面样式的安全性和可控性。比如我们为Android声明英文字体Roboto和中文字体Siyuanhei，因为Android机型的原因是百（luan）家（cheng）争（yi）明（tuo）。事实上，即使如此，正如我们的测试结果所示，我们也不能保证在所有Android机器上都能“正确”呈现。所以我们认为更有必要。2.写得越多就一定越好吗？回头看看知乎的font-family:font-family:'HelveticaNeue',Helvetica,Arial,sans-serif;你写的越多，你看起来越专业？恐怕不是。或许正是出于专业的考虑，知乎删除了字体，中文字体只做了最基本的无衬线限制。即使在Windows7上，此字体系列的呈现也是Arial和Simsun。即使在macOS上，英文字体也没有使用最新的SanFrancisco，但确实足够安全。考虑到业务场景的需求，我们尽量在安全的基础上优化各个平台的展示效果。所以这个东西不能用好坏来衡量。3.对设计团队意味着什么？对于设计师：设计师了解字体在各个平台的分布，字体选择的局限性，以及平台用户的基本体验；在实现设计稿时，可以根据目标平台调整设计稿使用的字体，使设计稿的字体与用户看到的最终效果保持一致。对于UI工程师：保证每个项目的标准字体样式统一；对字体样式的调试有更清晰的控制。
