什么是font-family？
在CSS中，font-family属性用于设置元素的字体系列。简单来说，这就是一系列字体的名称。如果浏览器无法找到第一个字体，它会尝试使用下一个字体，依次类推，直到找到一个可以使用的字体。
设置默认字体
在 Mac 系统中，-apple-system 是一种字体系列，它允许 Web 开发者使用系统默认字体代替其他字体。
使用 -apple-system 作为 font-family 属性，就意味着你选择了苹果系统的默认字体。
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
这段 CSS 代码中，在第一行 font-family 属性中添加了 -apple-system 作为字体系列，后面列出了一些备用字体（fallback fonts）。这意味着，如果系统找不到 -apple-system 字体，它将尝试使用下一个字体。
为什么使用 -apple-system？
使用 -apple-system 在以下情况下是有优势的：
1. 提供更好的可读性
苹果公司专门为各个设备设计了字体，这将确保在所有大小的设备上都提供最佳的可读性。
在 Web 开发中，我们需要考虑到所有访问我们站点的用户，无论他们使用什么设备，我们都希望为他们提供最佳的可读性。
使用 -apple-system 很好地解决了这个问题，这是用户所熟悉的默认字体，它确保我们的文本在所有设备上都具有良好的可读性。
2. 提供更好的一致性
在不同的设备和操作系统上，字体可能具有不同的外观和感觉。 如果我们使用不同的字体来为不同的设备进行设计，这将导致我们的网站在不同的设备上呈现的外观和感觉都不同，这会给用户造成不一致的感觉。
使用 -apple-system 提供了一致的外观和感觉，这将使用户在各种设备上具有完全相同的用户体验。
字体栈
尽管 -apple-system 如果无法加载将自动使用其他字体，但在几乎所有情况下都不是将此系列作为唯一的字体系列。 在大多数情况下，-apple-system 将用作字体栈的一部分。
为了确保您的网站在所有设备和浏览器上都正确呈现，您可以定义类似于以下示例 CSS 代码的字体系列：
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
字体栈的解释
我们可以看到，-apple-system 是字体栈的第一个选项，如果没有可用的 -apple-system 字体，系统将尝试使用下一个字体。 BlinkMacSystemFont 是另一个苹果系统默认字体，它用于对不支持 -apple-system 的版本进行后退。
'Segoe UI' 是微软的默认选择。它在较老的 Windows 系统上发挥作用，这使得这个字体成为字体栈上一个很好的选择。 Roboto 是 Android 设备的默认字体，而 Oxygen 和 Ubuntu 则是 Linux 选项。
Cantarell 是 GNOME 桌面环境的默认字体，而'Helvetica Neue' 是新版Helvetica字体的替代方案。sans-serif 则是最后的回退，常用于在所有系统上提供一种基本常规字体。
字体栈注意事项
请注意，字体栈的顺序很重要。这是因为如果浏览器找到匹配的字体，它将停止搜索并在该字体上选择。 因此，请在编写 CSS 代码时仔细思考您的字体栈的顺序，以确保在所有设备上显示正确的字体。
总结
-apple-system 是一个苹果开发人员常用的字体系列。它是苹果系统默认字体的一种体现，使用它可以保证我们的文本在不同设备上都具有良好的可读性，并且提供了一致的外观和感觉，这将使用户在使用不同设备采用完全一致的界面设计，提高了用户体验。