网站上的字体很容易成为浏览器在能够以最终外观和形式显示页面之前必须下载的总捆绑大小的一大部分。此外，我们需要担心各种事情，比如臭名昭著的无样式文本闪存(Fout)。然而，可以说，由于[Font-Display property](/css/font-face/# controlling-font-loading-enter-font-display).]，整个问题的一部分已经得到解决

除此之外，在网站上找到的文本几乎总是最重要的部分，所以我们不想要看起来不正确或难以阅读的文本。一个精明的网页设计师应该怎么做才能同时满足性能和外观的要求呢？

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

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

无衬线系统字体堆栈

简单地说，这里是这个网站上使用的系统字体堆栈的版本：

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

这个堆栈与WordPress使用的堆栈相同，到目前为止，它在Aligator.io上的内容上一直运行得很好。在这个网站上，标题使用递归Variable font]表示更华丽，但内容本身使用系统字体。

如果你感兴趣，下面是这些字体/关键字的细目：

• -APPLE-SYSTEM和Blink MacSystemFont：用于指代苹果设备上的系统字体的关键字，通常为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：如果所有其他方法都失败，则回退到默认浏览器sans-serif字体。通常不是最令人满意的结果，因此我们不使用font-family：sans-serif。

与生活中的大多数事情一样，系统字体堆栈有许多不同的风格，每一种风格都略有不同。例如，这是giHub uses.的堆栈

单空间系统字体堆栈

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

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

使用@Font-Face的系统字体

如果您厌倦了在css中的多个位置重复相同的多个字体名称字符串，在This css-Tricks article]中有一个技巧，它允许使用@font-faceat规则来定义引用整个堆栈的单个名称。