什么是系统字体堆栈?

What is the system font stack?

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

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

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

相关问题:

What is the system font stack?

CSSfont-family属性获取字体列表并使用浏览器可用的第一个字体。

一个(不是)系统字体堆栈是一个字体列表,它们是:

  • 可能会安装在很多计算机上(目标是堆栈中至少有一种字体可用于每台可能查看该网站的计算机)
  • 外观相似,因此设计一致(例如相似的字母宽度等)

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

Why should I use the system font stack?

在不同设备上获得一致的外观,而无需从 Internet 加载字体文件的带宽或时间影响。

What should the system font stack look like?

见仁见智。

虽然它得到了科学的支持(人们研究了跨设备字体的可用性),但您想要使用和决定哪些字体与您的目的足够相似并不是一成不变的。

1.什么是系统字体堆栈?

This generic font family lets text render with the default user interface font on the platform on which the UA is running. A cross-platform UA should use different fonts on its different supported platforms.

W3C CSS Fonts Module 4: system-ui

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

The purpose of system-ui is to allow web content to integrate with the look and feel of the native OS.

W3C CSS Fonts Module 4: system-ui

3。系统字体堆栈应该是什么样的?

如果您不需要旧版浏览器支持(主要是 IE),system-ui covers all modern browsers except Firefox。对于 Firefox,您仍然可以将 -apple-system 用于 macOS,将 iOS 与 font-family: system-ui -apply-system;.

之类的东西一起使用