Angular 为角度材质中的粗体文本设置特定字体

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

这是我在

样式中设置自定义字体的方式。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);

---

如何告诉角材质在例如h1-h6、b、th等中使用

CustomBoldFont

？我尝试设置自己的规则，但它们被覆盖。

使用类似的方法

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

---

您必须将

mat排版

类应用于要应用自定义排版的元素的父元素

摘录自： 默认情况下，角度材质不应用任何全局CSS。要更广泛地应用库的排版样式，可以利用mat排版CSS类。此类将设置所有子代本机元素的样式

<!-- 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-face声明，h1标记将按预期粗体显示，普通文本不会粗体显示，但普通文本为Arial。嘿@Peter！我已经添加了我的建议，但是如果你仍然面临这个问题，你能分享stackblitz吗？默认情况下，用垫子排版标记身体元素的有角度的材料。我尝试了“自定义字体”的技巧，但没有成功。如果我检查h1，它会显示calculated:font:400 24px/32px CustomFont，无衬线；这应该是大胆的，但它不是。如果我显式添加font-weight:bold，它将变为粗体。我的默认Roboto字体没有这个问题。有意思的是，你能共享mvp吗？好的，所以我将@font-face指令的字体权重属性从粗体改为400，现在它可以工作了…删除这个，现在所有内容都是粗体的。：）

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