什么是 font-family -apple-system?

在网页开发中，CSS样式中经常会出现一个属性：font-family: -apple-system;，那么这是什么意思呢？在本文中，我们将对font-family: -apple-system; 进行详细解释，还会介绍一些它的具体应用。

-apple-system 的含义

font-family: -apple-system; 是一种特殊的字体设置，它指定了当前操作系统中的系统字体，这里 -apple-system 实际上是 Safari 浏览器用于识别 Mac OS X 系统默认字体的一个关键字。

不同操作系统的系统字体不同，比如 Windows 系统下为微软雅黑等字体，而 Mac OS X 下的字体一般为 Apple 自带的 San Francisco 系列字体或者 Helvetica Neue 字体。因此，font-family: -apple-system; 样式在 Mac OS X 系统下渲染会使用 San Francisco / Helvetica Neue 字体，而在其他系统下会使用默认的字体。

示例代码

下面是一个展示font-family: -apple-system;在样式中的例子：

p {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

这是一个设定段落的文字样式，其中 font-family 属性设置了字体样式，首先使用 -apple-system 选择系统字体，如果系统没有安装此字体，则会选择后面列出的字体选择，从左到右逐个选择，直到找到合适的字体为止。

具体应用

那么，font-family: -apple-system; 的具体应用场景有哪些呢？

适用于 Safari 浏览器下的网页中，使页面字体与系统字体一致，增强视觉统一感，这也是苹果官方推荐的做法。
在 Mac OS X 系统下，使用 -apple-system 可以避免字体替换所带来的视觉割裂感，因为选用系统字体看起来更符合 Mac OS X 系统的视觉效果。
-apple-system 可以适用于移动端的网页设计，因为移动端使用的字体相对较少，而选用系统字体则可以尽量减少因字体相对较少而产生的字体兼容问题。