为什么找不到字体时CSS fontFamily默认为Times New Roman答案

【问题标题】：why is CSS fontFamily defaulting to Times New Roman when the font is not found为什么找不到字体时CSS fontFamily默认为Times New Roman
【发布时间】：2021-12-14 10:59:41
【问题描述】：

我有一个下一个应用程序，其主体具有 fontFamily：'brandon-grotesque'。当来自 themeprovider 的字体（使用材质 UI 和 <Typography>）不存在或者是拼写错误时，例如<body>-tag 内的组件中的“brandon-grotesk”，我希望 fontFamily 回退到“brandon-grotesque”而不是 Times New Roman。我该怎么做？

另外，我在 fontFamily 中写的内容并不重要，只要它没有碰到任何默认为 Times New Roman 的导入字体

<body style={{ fontFamily: 'brandon-grotesque' }}>
     <Main />
     <NextScript />
</body>

我也想过写 font-family: 'my-font', inherit 但不是有效的 css

【问题讨论】：

标签： css fonts

【解决方案1】：

每个浏览器都会有一些字体回退逻辑，使用默认情况下它期望在主机操作系统中的字体。

如果您检查CSS Fonts Module Level 3 spec、W3 Schools 或Mozilla Developer Network，您会发现font-family 属性可以采用逗号分隔的列表：

（您可以在 react 中使用花括号，但其他人应该注意它不适用于原始 CSS。）

<body style="font-family: 'Brandon Grotesque', 'Brandon Grotesk'">

另外，您将家族名称设置为brandon-grotesque，看起来它可能是一个文件名。您需要将其设置为字体系列显示名称，而不是文件名。

【讨论】：

react 中的内联样式实际上是带有花括号w3schools.com/react/react_css.asp，所以它没有错
抱歉，您没有提供该上下文。
我提到了“下一个应用程序”，它是一个反应框架，但没问题 :)
@KimVu 除了语法，我提供的答案对反应上下文有帮助吗？
嗯，不完全是，我想知道为什么 body-tag 中的元素在获得浏览器默认值之前不会获得 body-tag 中指定的字体系列。当没有指定字体系列时，正文中的字体系列有效，但如果有拼写错误，则默认为浏览器而不是正文标签