Angular Material M3中h2字体粗细设置未生效？如何修改？

你的配置中修改了全局bold-weight和medium-weight但未生效，原因是Angular Material M3的排版体系里，每个标题层级（比如h2对应headline-2）有独立的权重配置，全局基础变量不会直接覆盖层级设置。以下是几种可行的解决方法：

方法1：在主题定义中直接覆盖headline-2的权重 #

在mat.define-theme的typography配置里，针对h2对应的headline-2层级单独指定字体权重：

$theme: mat.define-theme((
  // 保留你的其他主题配置（如color、shape等）
  typography: (
    plain-family: 'Roboto, sans-serif',
    brand-family: 'Roboto, sans-serif',
    bold-weight: 400,
    medium-weight: 400,
    // 覆盖h2对应的headline-2层级权重
    headline-2: (
      weight: 400,
    ),
    use-system-variables: true,
  ),
));

方法2：使用自定义排版配置对象 #

先定义完整的自定义排版配置，再传入主题，适合批量修改多个标题层级：

// 定义自定义排版配置
$custom-typography: mat.define-typography-config(
  $plain-family: 'Roboto, sans-serif',
  $brand-family: 'Roboto, sans-serif',
  $bold-weight: 400,
  $medium-weight: 400,
  // 直接指定h2对应的headline-2权重
  $headline-2-weight: 400,
  // 若需修改h1，可添加$headline-1-weight: 400
);

// 将自定义排版传入主题
$theme: mat.define-theme((
  typography: $custom-typography,
  // 其他主题配置...
));

方法3：直接修改CSS变量（快速生效） #

Angular Material M3用CSS变量控制排版，可直接在:root中修改h2对应的变量：

: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);

  // 直接覆盖h2的字体权重变量
  --md-typescale-headline-2-weight: 400;
}

注意事项 #

• 确保@include mat.typography-hierarchy($theme)和@include mat.system-level-typography($theme)已正确在:root中引入，这是将主题排版配置应用到全局元素的关键。
• 若要修改所有标题（h1-h6），可在排版配置中依次覆盖headline-1到headline-6的weight属性，或对应$headline-n-weight变量。

内容的提问来源于stack exchange，提问作者MarcS82