0

我在 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 MaterialCustomBoldFont在例如 h1-h6、b、th 等中使用？我尝试设置自己的规则，但它们被覆盖了。

4

2 回答 2

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;
}
于 2020-09-29T10:12:15.703 回答
0

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

官方排版指南摘录：默认情况下，Angular Material 不应用任何全局 CSS。要更广泛地应用库的排版样式，您可以利用 mat-typography 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>

如果这仍然不起作用，很可能是您添加字体系列的方式存在问题，请尝试以下方法：

$custom-typography: mat-typography-config(
  $font-family: '"CustomFont", sans-serif'
);
于 2020-10-01T11:13:24.437 回答