Angular Material引入后字体变更问题（CSS环境下解决方案咨询）

Angular Material的默认主题会给全局元素（如body）或组件容器设置默认字体，这就是你引入Mat-Dialog后字体变更的原因。以下是针对CSS开发场景的可行解决方案：

方案1：强制保留原有网站字体 #

如果想维持网站原有字体，直接用高优先级选择器覆盖全局样式，确保你的设置优先级高于Material的默认样式：

/* 全局强制设置原有字体，!important用于确保优先级 */
body {
  font-family: "你的原有字体名称", sans-serif !important;
}

/* 让Material组件继承父元素字体，避免组件自身强制覆盖 */
.mat-mdc-dialog-container, .mat-dialog-container {
  font-family: inherit;
}

如果不想用!important，可以给根组件添加类选择器提升优先级：

app-root {
  font-family: "你的原有字体名称", sans-serif;
}

方案2：自定义Material主题字体 #

如果想让所有Material组件（包括Mat-Dialog）使用统一的自定义字体，可通过覆盖CSS变量实现：

:root {
  /* 替换Material的全局字体变量 */
  --mdc-typography-font-family: "你的自定义字体", sans-serif;
  /* 可选：让Dialog容器继承父元素背景色，减少样式冲突 */
  --mat-mdc-dialog-container-color: inherit;
}

方案3：单独修正Mat-Dialog字体 #

如果只想调整Mat-Dialog的字体，不影响全局或其他Material组件：

/* 直接设置Dialog容器字体 */
.mat-mdc-dialog-container {
  font-family: "你的原有字体名称", sans-serif !important;
}

/* 确保Dialog内的标题、内容继承容器字体 */
.mat-dialog-title, .mat-dialog-content {
  font-family: inherit;
}

额外注意事项 #

• 确保你的全局CSS文件在Angular Material样式之后加载（可在angular.json的styles数组中调整顺序），否则Material样式会覆盖你的设置。
• 如果使用自定义字体，需先通过@font-face正确引入：

@font-face {
  font-family: "你的字体名称";
  src: url("字体文件路径.woff2") format("woff2"),
       url("字体文件路径.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

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