material-components - MDC-Web 排版 : Font Customization

Question

是MDC typography特定于 Roboto 字体，或者我们可以使用其他 Google 字体来实现，如果是这样，推荐的方法是简单地应用 font-family CSS 到 body ?

最后，似乎 all header elements are tied to the <h1> element这似乎打破了 HTML5 的语义本质，即 h1通常比 h5 具有更高的重要性.

Answer 1

MDC-Web 是一个可定制的库，鉴于 Google doesn't prohibit using your brand styles along with Material Design framework ，您可以自由使用任何字体，而不仅仅是“Roboto”。

如果您使用纯 CSS 方法，请添加 font-family至 body还不够: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-Web’s typography variable在您的 .scss导入组件之前的文件:

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

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