CSS系统字体堆栈参考

网站上的字体很容易成为浏览器在能够以最终外观和形式显示页面之前必须下载的总包大小的很大一部分。另外，我们需要担心各种事情，比如臭名昭著的 Flash of Unstyled Text (FOUT)。不过，可以说，由于 font-display 属性，整个问题的一部分已经解决。

除此之外，在网站上找到的文本几乎总是最重要的部分，因此我们不希望出现看起来不正确或难以阅读的文本。一个精明的网页设计师应该做些什么来满足性能和外观？

一种解决方案是实际求助于使用已经安装在用户设备上的字体。在过去，这不是一个非常优雅的解决方案，因为一些流行的系统没有内置漂亮的字体。然而现在情况不同了，每个主要的操作系统都附带一个无衬线系统字体，看起来和读起来都很好。

因此，诀窍就是提供所有这些默认系统字体名称作为应该使用系统字体的元素的 font-family 属性的值。然后浏览器将使用它可以在当前系统上找到的第一个。请记住，这也意味着文本看起来会根据正在阅读的系统而有所不同。然而，这不一定是一件坏事，因为文本会让人感觉它是操作系统的原生内容。

无衬线系统字体堆栈

事不宜迟，这是该网站上使用的系统字体堆栈的版本：

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Oxygen-Sans, Ubuntu, Cantarell,
               "Helvetica Neue", sans-serif;
}

该堆栈与 WordPress 使用的堆栈相同，到目前为止，对于 Alligator.io 上的内容一直运行良好。在这个网站上，标题使用 Recursive 可变字体有点夸张，但内容本身使用系统字体。

如果您好奇，以下是这些字体/关键字的细分：

-apple-system 和 BlinkMacSystemFont：用于指代 Apple 设备上的系统字体的关键字，通常是 San Francisco 或 Helvetica Neue，取决于版本操作系统。在一些较新的浏览器上，关键字 system-ui 现在可以用来完成这两个关键字的工作。
Segoe UI：在Windows系统上使用。
Roboto：Android 设备的系统字体。
Oxygen-Sans：使用 KDE 的 Linux 系统。
Ubuntu：Ubuntu Linux
Cantarell：使用 Gnome（Ubuntu 除外）的 Linux 系统。
Helvetica Neue：在许多系统（尤其是 Apple 系统）上可用的常见后备字体，以防以前的都失败。
sans-serif：如果一切都失败了，回退到默认的浏览器无衬线字体。通常不是最令人满意的结果，因此我们不只使用 font-family: sans-serif。

与生活中的大多数事情一样，系统字体堆栈有许多不同的风格，每一种都有一点不同。例如，这里是 GitHub 使用的堆栈。

等宽系统字体堆栈

虽然没有用于基于衬线字体的系统字体堆栈，但有一个用于等宽字体的系统字体堆栈，这对于代码片段等非常有用。这是 Bootstrap v4 使用的（GitHub 也使用了非常相似的版本）：

code {
  font-family: SFMono-Regular, Menlo, Monaco,
               Consolas, "Liberation Mono", 
               "Courier New", monospace;
}

使用 @font-face 的系统字体

如果您厌倦了在 CSS 中的多个位置重复相同的多个字体名称字符串，this CSS-Tricks article 中记录了一个技巧，允许使用 @font -face at-rule 定义引用整个堆栈的单个名称。