CSS 系统字体堆栈参考

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。

网站上的字体很容易成为浏览器在显示页面最终外观和形式之前必须下载的总捆绑大小的一部分。此外，我们还需要担心各种问题，比如臭名昭著的未样式文本闪烁（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：用于引用苹果设备上的系统字体的关键字，通常是San Francisco或Helvetica Neue，具体取决于操作系统的版本。在一些更新的浏览器中，现在可以使用关键字system-ui来执行这两个关键字的工作。
• Segoe UI：用于Windows系统。
• Roboto：Android设备的系统字体。
• Oxygen-Sans：使用KDE的Linux系统。
• Ubuntu：Ubuntu Linux
• Cantarell：使用Gnome的Linux系统（不包括Ubuntu）。
• Helvetica Neue：许多系统（尤其是苹果系统）上都有的常见备用字体，以防前面的字体都失败了。
• 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的多个地方重复相同的多个字体名称的字符串，可以在这篇CSS-Tricks文章中找到一个技巧，允许利用@font-face规则来定义一个单一名称，该名称引用整个堆栈。