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

【问题标题】：Different variants of font Roboto in material-ui componentsMaterial-ui 组件中字体 Roboto 的不同变体
【发布时间】：2019-02-26 14:14:44
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

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

例如，

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

【讨论】：