5

MDC 排版是特定于 Roboto 字体的，还是我们可以使用其他 Google 字体实现，如果是这样，推荐的方法是否只是将font-familyCSS 应用于body？

最后，似乎所有标题元素都与<h1>似乎破坏了 HTML5 语义性质的元素相关联，即h1通常比h5.

4

2 回答 2

7

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

如果您使用纯 CSS 方法，添加font-familytobody是不够的：MDC-Web 将默认排版样式（包括font-family）应用于不同的组件（例如 、、mdc-button）和排版类，它们仍然会应用“Roboto”字体。所以，如果你打算使用这样的 MDC-Web 组件和类，你需要为它们中的每一个手动指定：mdc-listmdc-cardfont-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 的排版变量：.scss

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

@import "@material/typography/mdc-typography";
于 2018-01-06T09:59:55.493 回答
0

如果你不想使用 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

于 2020-11-20T17:14:24.370 回答