在 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);

该角材质文档不显示字体家庭参数，但你可以看到它的源代码。