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

Posted 2021-04-05

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

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

这种类型的字体堆栈已被Medium，W​​ordpress，Github，Bootstrap，Booking.com和许多其他人采用。所有这些都包括android版本4及以上的“Roboto”。我的问题是，为什么？如果“Roboto”从此堆栈中删除会发生什么？

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

是否有任何设备或浏览器没有将Roboto设置为默认的sans-serif字体？如果没有，为什么Roboto包含在这些字体堆栈中呢？

答案

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

答案很简单：确保。

这是你应该如何翻译它：

如果系统上安装了Roboto字体系列（或者浏览器能够应用它）来自自己的或加载的CSS @font-faces，那么当前面提到的任何字体系列都没有成功解析时，应该使用它。

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

考虑到对页面可能产生的影响，font-family实际上不是您应该优化应用程序的地方。此外，字体系列列表可以是1km长。从结算的第一个字体开始的所有内容都会被忽略，因此从技术角度来看，它实际上相当便宜。