只是想知道如何更改 Angular Material 中的默认字体...
默认是 Roboto，我找不到将其更改为不同字体的方法。
【问题讨论】：
排版自定义是 Angular Material 的扩展 基于 Sass 的主题。与创建自定义主题类似，您可以创建 自定义排版配置。
所以，在你的index.html 文件中包含这一行，链接到一些外部字体：
<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.define-palette($mat-blue);
$custom-accent: mat.define-palette($mat-amber);
$custom-theme: mat.define-light-theme($custom-primary, $custom-accent);
@include mat.all-component-themes($custom-theme);
就是这样。
您可以在this post 中找到有关自定义排版的更多信息。
示例中使用的字体来自Google Fonts。
更新：
正如@Nate May 所评论的，它随着 v12 的变化而变化，因此请查看updated documentation，了解当前对自定义排版的建议。
【讨论】：
在为最新的角度材料使用自定义主题时执行此操作 (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);
【讨论】：
您可以轻松覆盖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，其中也有演示。
【讨论】：
您可以在CSS 或SCSS 中使用CSS universal selector (*)：
* {
font-family: Raleway /* Replace with your custom font */, sans-serif !important;
/* Add !important to overwrite all elements */
}
从 Angular Material v2.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);
或者（v2.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);
请参阅Angular Material's typography documentation 了解更多信息。
注意：要应用字体，请将 mat-typography 类添加到应应用自定义字体的父级：
<body class="mat-typography">
<h1>Hello, world!</h1>
<!-- ... -->
</body>
【讨论】：