Question

我似乎无法找到有关在Angular Materials中使用其他字体的任何文档。这可以通过框架吗？

Answer 1

Angular Material是Material Design的实现，Material Design与Roboto字体紧密相关，正如您所提到的，文档中没有任何内容，所以我认为不可能通过框架来实现。

但是您可以轻松更改css文件中的字体系列，这需要在Angular Material依赖项之后包含在您的构建中。这是一个例子：

body {
  font-family: "Comic Sans MS";
}

input,
button,
select,
textarea {
 font-family: inherit;
 font-size: inherit;
 line-height: inherit;
}

和演示：http://codepen.io/mattdanna/pen/pgwVzX

从这里借来：https://github.com/angular/material/issues/6561#issuecomment-170837189

Answer 2

这是关于该主题的官方文档，但它没有指定如果无法加载字体，如何提供备份系列类： 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'

角度材料字体系列开关

2 个答案: