网站上的字体很容易成为浏览器在能够以最终外观和形式显示页面之前必须下载的总包大小的很大一部分。另外，我们需要担心各种事情，比如臭名昭著的无样式文本（FOUT）Flash。不过，可以说，由于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：如果所有其他方法都失败了，则回退到默认的浏览器 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 at-rule 来定义单个引用整个堆栈的名称。
