如何更改角材m3中h2的字体粗细？

Question

我在主题中设置了字体粗细，并期望它将应用于所有元素：

$theme: mat.define-theme((
  ...
  typography: (
    plain-family: 'Roboto, sans-serif',
    brand-family: 'Roboto, sans-serif',
    bold-weight: 400,
    medium-weight: 400,
    use-system-variables: true,
  ),
));
...
html {
  @include mat.all-component-themes($theme);
}

:root {
  @include navigation-theme.theme($theme, $variant-colors);

  @include mat.typography-hierarchy($theme);
  @include mat.system-level-colors($theme);
  @include mat.system-level-typography($theme);
}

我希望像 h1、h2 这样的所有元素现在的字体粗细都是 400，但事实并非如此。

Answer 1

如果您想将权重应用于

h1

、

h2

、

h3

等，那么您需要将其设置为

regular-weight

。

@use '@angular/material' as mat;

$theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
    ),
    typography: (
      plain-family: 'Roboto, sans-serif',
      brand-family: 'Roboto, sans-serif',
      bold-weight: 500,
      medium-weight: 500,
      regular-weight: 500, // <- changed here!
      use-system-variables: true,
    ),
  )
);

body {
  @include mat.all-component-themes($theme);
  font-family: Roboto, 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 30px;
  height: 100%;
}
:root {
  // @include navigation-theme.theme($theme, $variant-colors);

  @include mat.typography-hierarchy($theme);
  @include mat.system-level-colors($theme);
  @include mat.system-level-typography($theme);
}
html {
  height: 100%;
}

@include mat.core();
@include mat.color-variants-backwards-compatibility($theme);

HTML：

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

Stackblitz 演示