Angular 18中Material 3 SCSS API如何定义字体排版层级？

云上老周

2026-6-23

Angular 18 + Material 3 SCSS 自定义字体排版层级实现

Material 3的SCSS排版API和Material 2结构类似，但层级命名与前缀有调整，以下是对应你原有配置的实现方式：

1. 自定义排版配置

用mat.define-typography-config替代原mat.m2-define-typography-config，层级名称换成Material 3的标准命名（比如原headline-1对应display-large），层级定义使用mat.define-typography-level（去掉m2前缀）：

// 自定义排版配置
$my-custom-typography-config: mat.define-typography-config(
  // 对应原M2的headline-1
  $display-large: mat.define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
  // 对应原M2的headline-2
  $display-medium: mat.define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
  // 对应原M2的headline-3
  $display-small: mat.define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
  // 对应原M2的headline-4
  $headline-large: mat.define-typography-level(34px, 40px, 400),
  // 对应原M2的headline-5
  $headline-medium: mat.define-typography-level(24px, 32px, 400),
  // 其他需要自定义的层级可补充，比如body、title等
  $body-large: mat.define-typography-level(16px, 24px, 400),
);

2. 将自定义排版应用到主题

定义Material 3主题时，把上述排版配置传入mat.define-theme的$typography参数：

// 定义主题色
$my-primary: mat.define-palette(mat.$blue-palette);
$my-accent: mat.define-palette(mat.$pink-palette);
$my-warn: mat.define-palette(mat.$red-palette);

$my-theme: mat.define-theme(
  (
    color: (
      primary: $my-primary,
      accent: $my-accent,
      warn: $my-warn,
    ),
    typography: $my-custom-typography-config, // 应用自定义排版
  )
);

// 输出主题样式
@include mat.all-component-themes($my-theme);