html - 当这些是操作系统字体时，字体如何对字体粗细使用react？

Question

做system UI fonts对 font-weight 采取同样的方式？

我试过这个:

font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif

还有这个

@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500');
font-family: Roboto

在我的 ubuntu 操作系统上。字体粗细对两个字体系列的影响不同。当 font-weight: 500 与来自 google.fonts 的 Roboto 一起使用时，文本为粗体。当 font-weight: 500 与 system ui fonts 一起使用时，我没有粗体。

所以我想知道发生了什么事？

Answer 1

font-weight 的数值为 100-900。

通常 400 与 normal 相同，700 与 bold 相同，尽管这是特定于字体的。

在您的情况下，Roboto 的 font-weight 显示为 500 被定义为 thicker 正常，因此存在差异。

作为旁注，并非所有字体都有粗体版本。