MDC-Web 排版：字体自定义

Question

是MDC排版特有的Roboto字体，或者我们可以与其他谷歌的字体，如果这样实施，简直到应用建议的方式font-familyCSS来body？

最后，似乎所有头元素联系在一起的<h1>元素，这似乎打破HTML5的语义性质，即h1通常具有高于意义h5。

Answer 1

MDC-Web 是一个可定制的库，鉴于Google 不禁止将您的品牌样式与 Material Design 框架一起使用，您可以自由使用任何字体，而不仅仅是“Roboto”。

如果您使用纯 CSS 方法，添加font-familytobody是不够的：MDC-Web 将默认排版样式（包括font-family）应用于不同的组件（例如mdc-button、mdc-list、mdc-card）和排版类，并且它们仍然会应用“Roboto”字体。因此，如果您要使用这样的 MDC-Web 组件和类，您需要为font-family它们中的每一个手动指定：

.mdc-button {
  font-family: "Open Sans", sans-serif;
}

.mdc-list {
  font-family: "Open Sans", sans-serif;
}

.mdc-card__supporting-text {
  font-family: “Open Sans”, sans-serif;
}

但这可能很乏味，因此生成 MDC-Web 样式的推荐方法是使用 Sass。具体来说，你需要重写MDC-网页的排版变量在你的.scss文件导入组件之前：

$mdc-typography-font-family: "Open Sans", sans-serif;

@import "@material/typography/mdc-typography";