系统字体堆栈

将默认值设置为特定操作系统的系统字体可以提高性能，因为浏览器不必下载任何字体文件，而是使用已经拥有的字体文件。 不过，任何“网络安全”字体都是如此。 “系统”字体的优点在于，它与当前操作系统使用的字体匹配，因此外观很舒适。

这些系统字体是什么？ 在撰写本文时，其分解如下：

操作系统	版	系统字体
Mac OS X	埃尔卡皮坦	旧金山
Mac OS X	优胜美地	Helvetica Neue
Mac OS X	小牛队	露西达·格兰德（Lucida Grande）
视窗	远景	Segoe UI
视窗	经验值	塔豪玛
视窗	3.1对我	微软Sans Serif
安卓系统	冰淇淋三明治（4.0）+	机械手
安卓系统	纸杯蛋糕（1.5）至蜂窝（3.2.6）	Droid Sans
的Ubuntu	所有版本	的Ubuntu

已经到片段了！

前言的原因是它显示了您可能需要回到支持系统字体的深度。 此外，它还有助于说明在使用新的系统版本时会出现新的字体，从而可能需要更新字体堆栈。

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

Chrome和Safari 最近发布了 “ system-ui”，它是一种通用字体系列，在以下示例中可以代替“ -apple-system”和“ BlinkMacSystemFont”使用。 向JJ提示信息。

应用系统字体的一种方法是使用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";
}

中型和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;
}

注意：此方法仅应在font-family属性上使用，而不是font速记。 Booking.com发布了关于警告的详尽记录 ，因为前导字体似乎是供应商的前缀，因此它产生了警告。

方法2：系统字体堆栈

第一种方法的局限性在于，每次在元素上使用字体时，都必须调用完整的字体堆栈，这可能会使代码繁琐和肿，具体取决于使用位置和方式。

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

这样做的好处是，您可以一次声明字体，然后就可以在font-family属性上进行声明，而不必每次都声明字体。

/* Define the "system" font family */
@font-face {
  font-family: system;
  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";
}

请注意，Jonathan的完整示例说明了定义system字体家族变体的功能，该变体已在上面的代码段中定义，以解决斜体，粗体和其他粗细问题。

有关

• CSS中的OS专用字体 –包括用于测试所用字体JavaScript方法。
• SVG中的系统字体
• 在Booking.com实现系统字体 -一个教训- Booking.com股，他们学会了如何使用该系统字体堆栈font如预期速记不工作。

翻译自: https://css-tricks.com/snippets/css/system-font-stack/