material-ui - Material-ui 组件中字体 Roboto 的不同变体

Question

我正在使用 material-ui 组件的最新版本。在文档中他们说你必须把这行代码

href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"

在您的 index.html 中，以便能够使用字体 Roboto。我的问题是如何为不同的组件应用 Roboto 字体的不同变体（即常规、粗体、中等、黑色、浅色）？

Answer 1

在Material-UI Typography页面中，Roboto:300, 400, 500 适用于 Material-UI 默认的 Typography。

在您的情况下，您可以将 fontFamily 更改为 Roboto 并将 fontWeight 更改为 100、300、400、700 和 900，以便使用浅色/常规/黑色 Roboto 字体。此外，如果您想将其设为粗体或斜体，请使用 HTML 或标记将它们包装起来。

例如，

<Typography variant="h6" style={{fontWeight: "700",fontFamily: "Roboto"}}>
  This is stack overflow
</Typography>