在“系统字体堆栈”中指定“Roboto”实际上有什么作用吗？

Question

CSS 的最新趋势是使用“系统”字体堆栈，该堆栈利用为用户操作系统设计的字体。通常这看起来像这样：

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

这种类型的字体堆栈已被 Medium、Wordpress、Github、Bootstrap、Booking.com 和许多其他公司采用。所有这些都包括适用于 Android 4 及更高版本的“Roboto”。我的问题是，为什么？如果从这个堆栈中删除“Roboto”会发生什么？

根据我的测试，即使您在 android 设备上（在设置中）切换系统字体，浏览器默认的“sans-serif”字体始终是 Roboto。

是否有任何设备或浏览器不将 Roboto 设置为可用的默认无衬线字体？如果没有，为什么 Roboto 会包含在这些字体堆栈中？

Answer 1

...为什么将 Roboto 包含在这些字体堆栈中？

答案很简单：确保。

你应该这样翻译它：

如果 Roboto 字体系列安装在系统上（或浏览器能够应用它）来自自己的或加载的 CSS @font-faces，则应在没有上述情况时使用它字体系列成功解析。

是否有任何当前设备在 Roboto 之前实际上没有成功，因为大多数设备在堆栈中较早地解析相同的字体，因为它是默认的系统字体？ 不是。因为没有人知道明年会推出什么样的新设备，而在堆栈中指定 Roboto 可能会受益。

考虑到对页面可能产生的影响，font-family 确实不是你应该优化应用的地方。此外，字体家族列表可以长达 1 公里。忽略第一个解析的字体之后的所有内容，因此从技术角度来看，它实际上非常便宜。