如何覆盖Angular Material默认排版并自定义字体？

问题核心 #

Angular Material的主题样式优先级高于普通全局html选择器，哪怕加了!important也可能被组件内样式或主题生成的类覆盖。

可行解决方案 #

方案1：在主题中直接配置（官方推荐） #

Angular Material支持在创建主题时直接指定排版规则，这是优先级最高的方式：

1. 打开你的主题文件（通常是theme.scss），添加自定义排版配置：

@import '@angular/material/theming';

// 定义自定义字体排版
$custom-typography: mat-typography-config(
  $font-family: '"AvertaStd", "Helvetica Neue", "Helvetica", "Arial", sans-serif'
);

// 将自定义排版全局应用
@include angular-material-typography($custom-typography);

// 继续原有主题定义（如果已有）
$primary: mat-palette($mat-indigo);
$accent: mat-palette($mat-pink, A200, A100, A400);
$warn: mat-palette($mat-red);
$theme: mat-light-theme($primary, $accent, $warn);

@include angular-material-theme($theme);

方案2：提升全局样式优先级 #

如果不想修改主题文件，用更精准的选择器覆盖：

// 覆盖所有Angular Material组件的字体
.mat-typography, .mat-typography * {
  font-family: "AvertaStd", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
}

// 保留全局html层的字体设置
html {
  font-family: "AvertaStd", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
}

方案3：确保自定义字体已正确引入 #

如果AvertaStd是本地字体，先在styles.scss中引入字体文件：

@font-face {
  font-family: 'AvertaStd';
  src: url('./assets/fonts/AvertaStd-Regular.woff2') format('woff2'),
       url('./assets/fonts/AvertaStd-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

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