系统字体栈

默认使用特定操作系统的系统字体可以提高性能，因为浏览器不必下载任何字体文件，它使用的是已经存在的字体。这对于任何“网络安全”字体都是如此。但是，“系统”字体的妙处在于它与当前操作系统的使用相匹配，因此它们看起来很舒服。

这些系统字体是什么？在撰写本文时，情况如下

操作系统	版本	系统字体
macOS	Monterey	San Francisco Pro (可变)
macOS	El Capitan	San Francisco
macOS	Yosemite	Helvetica Neue
macOS	Mavericks	Lucida Grande
Windows	Vista	Segoe UI
Windows	XP	Tahoma
Windows	3.1 到 ME	Microsoft Sans Serif
Android	Ice Cream Sandwich (4.0)+	Roboto
Android	Cupcake (1.5) 到 Honeycomb (3.2.6)	Droid Sans
Ubuntu	所有版本	Ubuntu

快去看看代码片段吧！

前言的原因是，它显示了您可能需要回溯多远才能支持系统字体。此外，它有助于说明随着新系统版本的出现，新的字体也会出现，因此可能需要更新您的字体栈。

方法 1：元素级别的系统字体

Chrome 和 Safari 最近发布了“system-ui”，这是一个通用的字体系列，可以在以下示例中用作“-apple-system”和“BlinkMacSystemFont”的替代品。感谢 J.J. 提供的信息。

应用系统字体的一种方法是使用 font-family 属性在元素上直接调用它们。

GitHub 在其网站上使用了这种方法，在body 元素上应用系统字体

/* System Fonts as used by GitHub */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

无论是 Medium 还是 WordPress 管理员 都使用了类似的方法，只是略有不同，最显著的是对 Oxygen Sans（为 GNU+Linux 操作系统创建）和 Cantarell（为 GNOME 操作系统创建）的支持。此代码片段还放弃了对某些类型表情符号和符号的支持

/* System Fonts as used by Medium and WordPress */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",sans-serif;
}

最近，Chrome 和 Safari 发布了 system-ui，这是一个通用的字体系列，可以替代 -apple-system 和 BlinkMacSystemFont。这意味着 GitHub 代码片段可以简化为：

/* System Fonts with system-ui */
body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

注意：Booking.com 发布了一篇关于 如何实施系统字体 的详细文章，该文章警告不要在 font 简写属性上使用以 -apple-system 开头的代码片段，因为某些浏览器可能会将前导字体视为将被忽略的供应商前缀。请改用 font-family 属性，或将 -apple-system 和 BlinkMacSystemFont 替换为 system-ui。

这里明显的限制是，每次想要将此长列表字体应用于单个元素时，都必须调用它。随着时间的推移，这可能会变得很麻烦，并使您的代码比实际需要更臃肿。相反，您可以考虑为此创建一个 CSS 变量

:root {
  --system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.element {
  font-family: var(--system-ui);
}

这当然更容易阅读，而且如果字体栈需要更新，它也更容易维护。更改一次，它就会在所有地方生效！

方法 2：系统字体栈

Jonathan Neal 提供了一种 替代方法，其中使用 @font-face 声明系统字体。

/* Define the "system" font family */
@font-face {
  font-family: system-ui;
  font-style: normal;
  font-weight: 300;
  src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
}

/* Now, let's apply it on an element */
body {
  font-family: "system-ui";
}

截至撰写本文时，此代码片段已经有一段时间没有更新，可能导致不同的字体，但我们在这里包含它的原因是为了说明定义上述代码片段中定义的 system-ui 字体系列的变体以考虑斜体、粗体和额外字重的功能。

如果我们没有 CSS 变量，这将是一种更有效的方式来编写和更新代码。

相关

• CSS 中的操作系统特定字体 – 包括用于测试正在使用的字体JavaScript 方法。
• SVG 中的系统字体
• 在 Booking.com 上实施系统字体 — 经验教训 – Booking.com 分享了他们在 font 简写属性上使用系统字体栈时遇到的经验教训。