Question

只是想知道如何更改Angular Material中的默认字体...

默认为Roboto，我找不到将其更改为不同字体的方法。

Answer 1

您可以使用CSS或SCSS中的* CSS selector：

* {
  font-family: Raleway /* Replace with your custom font */, sans-serif !important; 
  /* Add !important to overwrite all elements */
}

编辑：从2.0.0-beta.7开始，您可以通过使用mat-typography-config功能创建排版配置并在angular-material-typography mixin中包含此配置来自定义排版：

@import '~@angular/material/theming';
$custom-typography: mat-typography-config(
  $font-family: 'Raleway'
);

@include angular-material-typography($custom-typography);

或者（2.0.0-beta.10及以上）：

// NOTE: From `2.0.0-beta.10`, you can now pass the typography via the mat-core() mixin:
@import '~@angular/material/theming';
$custom-typography: mat-typography-config(
  $font-family: 'Raleway'
);
@include mat-core($custom-typography);

More info

注意：要应用字体，请将mat-typography类添加到应该应用自定义字体的父级：

<body class="mat-typography">
  <h1>Hello, world!</h1>
  <!-- ... -->
</body>

Answer 2

来自此official guide：

版式定制是Angular Material的扩展基于Sass的主题。与创建自定义主题相似，您可以创建自定义版式配置。

因此，请将此行包含在<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">文件中，以链接到某些外部字体：

styles.scss

然后将自定义版式设置放入您的@import '~@angular/material/theming'; $custom-typography: mat-typography-config($font-family: '"Oswald", sans-serif;'); @include mat-core($custom-typography);文件中，调整所选字体的字体系列字符串：

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

$custom-typography: mat-typography-config($font-family: '"Oswald", sans-serif;');
@include mat-core($custom-typography);

$custom-primary: mat-palette($mat-blue);
$custom-accent: mat-palette($mat-amber);
$custom-theme: mat-light-theme($custom-primary, $custom-accent);
@include angular-material-theme($custom-theme);

带有颜色和全部内容的完整自定义主题类似于：

{{1}}

就是这样。

您可以在this post中找到有关自定义排版的更多信息。

示例中使用的字体来自Google Fonts。

Answer 3

当为最新的角度材料使用自定义主题时这样做 (12)

styles.scss

@use '~@angular/material' as mat;
@font-face {
   font-family: 'custom-font';
   src: url('assets/custom-font.ttf');
 }
$custom-typography: mat.define-typography-config(
  $font-family: "custom-font"
);
@include mat.core($custom-typography);

Answer 4

您可以轻松覆盖 mat-typography-config 以设置不同变量的字体类型和值

.custom-typography {
  @include angular-material-typography($custom-typography);
}

$custom-typography: mat-typography-config(
  $font-family: "Quicksand, sans-serif",
);

查看文章 https://www.universal-tutorial.com/angular-tutorials/angular-typography，其中也有演示。

角度材料和更改字体

4 个答案: