【发布时间】：2020-11-01 00:10:07
【问题描述】：
许多流行网站（包括 Stack Overflow、GitHub、Medium 和 Wordpress）都采用了系统字体堆栈的使用。
- 什么是系统字体堆栈？
- 为什么要使用系统字体堆栈？
-
系统字体堆栈应该是什么样的？
有许多不同的站点具有不同版本的系统字体堆栈，但不清楚哪一个是最新的并且与现代设备最兼容：
相关问题：
【问题讨论】：
【发布时间】：2020-11-01 00:10:07
【问题描述】：
什么是系统字体栈？
CSS font-family 属性接受一个字体列表并使用浏览器可用的第一个字体。
一个（不是）系统字体堆栈是一个字体列表，它们是：
- 可能安装在多台计算机上（目标是在每台可能查看网站的计算机上至少有一种字体可用）
- 外观相似，因此设计一致（例如，字母宽度相似等）
正如我所说，这是一个“a”而不是“the”的问题。类似于 Ariel 的系统字体列表将不同于类似于 Times New Roman 的系统字体。
为什么要使用系统字体栈？
在不同的设备上获得一致的外观，而不会影响从 Internet 加载字体文件的带宽或时间。
系统字体堆栈应该是什么样的？
这是一个见仁见智的问题。
虽然它有科学的支持（人们会研究跨设备的字体可用性），但您想要使用并决定哪些字体足够相似以满足您的目的并不是一成不变的。
【讨论】：
1.什么是系统字体栈？
此通用字体系列允许在运行 UA 的平台上使用默认用户界面字体呈现文本。跨平台 UA 应在其不同支持的平台上使用不同的字体。
2。为什么要使用系统字体堆栈？
system-ui 的目的是让网页内容与本机操作系统的外观和感觉相结合。
3.系统字体堆栈应该是什么样的？
如果您不需要旧版浏览器支持（主要是 IE），system-ui covers all modern browsers except Firefox。对于 Firefox，您仍然可以将 -apple-system 用于 macOS 和 iOS，例如 font-family: system-ui -apply-system;。
【讨论】：