Order of font-family

• CSS

由于系统的差异，不同的电脑上存在的字体是不一样的。为了网站的效果可以兼顾各个设备，一般在写 CSS 的时候，font-family 总是很长的一串。通过字体 fallback 的功能，让浏览器自行选择最先能匹配到的字体文件，从而保证显示的效果大体上接近于视觉效果图。在实际书写中，有一个值得注意的细节：英文字体应该在中文字体的前面。

中文字体文件往往包含英文字符，但是这些英文字符的样式很可能并不是设计师希望看到的。如果中文字体展示在英文字体的前面，英文字体就没法被使用到，导致最终的效果略有偏差。下面展示了中文字体 PingFang SC 和苹果默认英文系统字体（SF NS Display）针对英文字母的渲染效果（需要在 MacOS 下查看）：

ffi

ffi

所以，应该写：

.example {
  font-family:
    -apple-system, BlinkMacSystemFont,
    'Segoe UI', 'Helvetica Neue', Helvetica, Arial,
    'PingFang SC', 'Microsoft YaHei',
    sans-serif;
}

而不是：

.example {
  font-family:
    'PingFang SC', 'Microsoft YaHei',
    -apple-system, BlinkMacSystemFont,
    'Segoe UI', 'Helvetica Neue', Helvetica, Arial,
    sans-serif;
}

这里，-apple-system, BlinkMacSystemFont 针对苹果下的 Safari 和 Chrome 内核调用系统自带字体，对应到的英文字体是 SF (SF NS Display)，中文字体是 PingFang (PingFang SC)。