什么是系统字体堆栈？

Question

许多流行网站（包括 Stack Overflow、GitHub、Medium 和 Wordpress）都采用了系统字体堆栈的使用。

1. 什么是系统字体堆栈？
2. 为什么要使用系统字体堆栈？
3. 系统字体堆栈应该是什么样子？
   

有许多不同的网站具有不同版本的系统字体堆栈，但哪一个是最新的并且与现代设备最兼容并不清楚：

• systemfontstack.com
• CSS 技巧：系统字体堆栈

相关问题：

• 在“系统字体堆栈”中指定“Roboto”实际上有什么作用吗？
• 如何指定系统默认的衬线和无衬线字体系列？

Answer 1

什么是系统字体堆栈？

CSS

font-family

属性采用字体列表并使用浏览器可用的第一个字体。

（不是）系统字体堆栈是字体列表，其中：

• 可能会安装在许多计算机上（目标是在每台可能查看该网站的计算机上至少有一种字体可用）
• 外观相似，因此设计一致（例如相似的字母宽度等）

正如我所说，这是一个“a”而不是“the”的问题。类似于 Ariel 的系统字体列表将不同于类似于 Times New Roman 的系统字体。

为什么要使用系统字体堆栈？

在不同设备上获得一致的外观，而不会影响从互联网加载字体文件的带宽或时间。

系统字体堆栈应该是什么样子？

这是一个见仁见智的问题。

虽然它有科学支持（人们对跨设备的字体可用性进行研究），但您想要使用和决定哪些字体足够相似以达到您的目的并不是一成不变的。

Answer 2

1。什么是系统字体堆栈？

此通用字体系列允许在运行 UA 的平台上使用默认用户界面字体呈现文本。跨平台的UA应该在不同支持的平台上使用不同的字体。

W3C CSS 字体模块 4：

system-ui

2。为什么要使用系统字体堆栈？

system-ui 的目的是让 Web 内容与本机操作系统的外观和感觉相集成。

W3C CSS 字体模块 4：

system-ui

3.系统字体堆栈应该是什么样子？

如果您不需要旧版浏览器支持（主要是 IE），

system-ui

涵盖所有现代浏览器。