Angular Material 字体系列切换

Question

我似乎找不到任何关于在 Angular Materials 中使用不同字体的文档。这可以通过框架实现吗？

Answer 1

这是关于该主题的官方文档，但它没有指定如果字体无法加载时如何提供备份系列类：https : //material.angular.io/guide/typography

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

// Define a custom typography config that overrides the font-family as well as the
// `headlines` and `body-1` levels.
$custom-typography: mat-typography-config(
      $font-family: monospace,
      $headline: mat-typography-level(32px, 48px, 700),
      $body-1: mat-typography-level(16px, 24px, 500)
);
// Override typography for all Angular Material, including mat-base-typography and all components.
@include angular-material-typography($custom-typography);

编辑; 对于备份字体系列（注意引用）：

$font-family: '"Sintony", Arial, sans-serif'

编辑; 如果您在 /assets 中有自定义字体

@font-face {
    font-family: 'MyWebFont';
    src: url('/assets/webfont.eot');
}

$font-family: '"MyWebFont", Arial, sans-serif'