Angular 18 Material 2中mat-tab-group全局设置Poppins字体失效问题

问题根源分析 #

你的SCSS代码存在几个关键问题，导致字体设置无法作用到mat-tab-group：

• 主题配置未整合排版参数，Material组件样式优先级高于全局样式，必须将排版配置绑定到主题才能生效
• 排版配置代码存在语法错误（未闭合括号）
• 主题与排版的加载顺序错误
• 仅针对button组件应用了排版，未覆盖tab组件的样式

修正后的完整SCSS代码 #

// 1. 先加载Material核心
@include mat.core();

// 2. 定义Poppins字体的排版配置
$typography: mat.m2-define-typography-config(
  $font-family: 'Poppins, sans-serif',
  $headline-1: mat.m2-define-typography-level(50px, 50px, 300, $letter-spacing: -1.5px),
  $headline-2: mat.m2-define-typography-level(60px, 72px, 300, $letter-spacing: -0.5px),
  $headline-3: mat.m2-define-typography-level(48px, 56px, 400, $letter-spacing: 0px),
  // 可选：自定义tab标签的字体级别
  $body-1: mat.m2-define-typography-level(14px, 20px, 400)
);

// 3. 整合排版、颜色、密度到主题中
$theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: mat.$violet-palette,
    tertiary: mat.$red-palette,
  ),  
  density: (
    scale: 0
  ),
  typography: $typography // 关键：将排版配置加入主题
));

// 4. 向后兼容配置
@include mat.color-variants-backwards-compatibility($theme);

// 5. 全局应用所有组件主题（包含排版）
@include mat.all-component-themes($theme);

// 兜底方案：若仍有局部样式不生效，强制覆盖tab标签样式
.mat-tab-label {
  font-family: 'Poppins', sans-serif !important;
}

额外必要步骤 #

1. 确保Poppins字体已加载：在项目index.html头部添加Google Fonts引入：

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap" rel="stylesheet">

如果使用本地字体，需在SCSS中声明字体文件路径：

@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
}

2. 检查组件样式隔离：确保上述配置写在全局样式文件（如styles.scss）中，或组件使用encapsulation: ViewEncapsulation.None，避免样式隔离导致全局设置失效。

关键说明 #

Material组件样式优先级极高，必须通过mat.define-theme将排版配置整合到主题，再通过mat.all-component-themes全局应用，才能覆盖组件默认字体。强制类名覆盖是兜底方案，优先推荐主题整合的方式。

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