angular - 在 Angular Material 中使用两种不同的字体

Question

我使用自定义字体创建了自己的自定义主题:

@import '~@angular/material/theming';
@include mat-core();
$custom-typography: mat-typography-config($font-family: '"work sans",    sans-serif;');
@include mat-core($custom-typography);

现在我想为每个标题(h1-h6)使用字体“Oswald”。我该怎么做？

Answer 1

可以为每个排版级别配置不同的字体。像这样的事情:

@import '~@angular/material/theming';


$custom-typography: mat-typography-config(
    $font-family: 'default font',
    $headline: mat-typography-level(112px, 112px, 300, 'another font'),
    $title: mat-typography-level(56px, 56px, 400, 'and another font'),
);
@include mat-core($custom-typography);

Angular Material documentation没有显示font-family参数，但是可以看到in the source code .