MDC-Web Typography：字体定制

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。具体来说，您需要在导入组件之前覆盖 .scss 文件中的 MDC-Web’s typography variable：

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

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

Answer 2

如果您不想使用 SASS，您可以通过在 css 中设置变量来进行一些基本的自定义。例如：

<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<link rel="stylesheet" href="/assets/css/site.css" />

site.css

:root {
    --mdc-typography-font-family: 'Nunito Sans', sans-serif;
}

body {
    font-family: var(--mdc-typography-font-family);
}

您还可以使用如下变量覆盖默认主题颜色：

--mdc-theme-primary: #0d46a0;

可在此处找到更多信息：https://material.io/develop/web/docs/theming

MDC-Web Typography：字体定制

MDC-Web Typography: Font Customization

material-components

material-components-web