为 Angular Material 中的粗体文本设置特定字体

Question

我在 Angular 应用程序中使用了两种自定义字体，一种用于普通文本，一种用于粗体文本。我想转向 Angular Material，但我不知道如何在其中设置粗体。

这就是我在 styles.scss 中设置自定义字体的方式：

@font-face {
  font-family: CustomFont;
  src: url(assets/font.ttf) format("truetype");
}

@font-face {
  font-family: CustomBoldFont;
  src: url(assets/font-bold.ttf) format("truetype");
}
    
@import '~@angular/material/theming';

$custom-typography: mat-typography-config(
  $font-family: 'CustomFont, sans-serif'
);

@include mat-base-typography($custom-typography);

如何告诉 Angular Material 使用 CustomBoldFont 例如h1-h6、b、th 等？我尝试设置自己的规则，但它们被覆盖了。

Answer 1

使用类似这样的东西

@font-face {
    font-family: "CustomFont";
    src: url("assets/font.ttf");
}
@font-face {
    font-family: "CustomFont";
    src: url("assets/font-bold.ttf");
    font-weight: bold;
}

Answer 2

您必须将 mat-typography class 应用到要应用自定义排版的元素的父级。

摘自official typography guide：默认情况下，Angular Material 不应用任何全局 CSS。要更广泛地应用库的排版样式，您可以利用 mat-typography CSS class。 class 将设置所有后代原生元素的样式。

<!-- By default, Angular Material applies no global styles to native elements. -->
<h1>This header is unstyled</h1>

<!-- Applying the mat-tyography class adds styles for native elements. -->
<section class="mat-typography">
  <h1>This header will be styled</h1>
</section>

如果仍然无效，很可能是您添加 font-family 的方式有问题，请尝试以下方法是否有效：

$custom-typography: mat-typography-config(
  $font-family: '"CustomFont", sans-serif'
);

为 Angular Material 中的粗体文本设置特定字体

Set specific font for bold text in Angular Material

sass

angular-material

angular

scss-mixins

angular-material-9