更改 Angular Material v15 的字体
由于找不到有关如何更改Angular Material字体的新一点的日文信息，所以我将把它写成文章。
如果对有困难的人有所帮助，我将感到幸福。
如果有错误等，请指正。
我想做的事情 (Wǒ zuò de
将Angular Material的所有组件的字体从「Roboto」更改为「Noto Sans JP」。
保護越來越受到重視，人們正開始意識到我們的環境面臨的問題。
※Angular目前版本为15，16版本尚未确认是否存在。
Angular CLI: 15.2.8
Node: 18.16.0
Package Manager: npm 9.6.6
OS: win32 x64
Angular: 15.2.9
... animations, cdk, common, compiler, compiler-cli, core, forms
... material, platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1502.8
@angular-devkit/build-angular 15.2.8
@angular-devkit/core 15.2.8
@angular-devkit/schematics 15.2.8
@angular/cli 15.2.8
@schematics/angular 15.2.8
rxjs 7.8.1
typescript 4.9.5
方法步骤
准备想要使用的字体
按照Google Fonts的步骤，在index.html中导入字体。
<head>
<meta charset="utf-8">
<title>MyApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
- <link rel="preconnect" href="https://fonts.gstatic.com">
- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
在CSS中设置字体（不影响Angular Material）
html, body { height: 100%; }
- body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+ body { margin: 0; font-family: "Noto Sans JP", sans-serif; }
改变Angular Material所有组件的字体设置。
要更改Angular Material组件的字体，需要按照以下方式编辑styles.scss文件。
+ @use "@angular/material" as mat;
html, body { height: 100%; }
body { margin: 0; font-family: "Noto Sans JP", sans-serif; }
+ $myapp-typography: mat.define-typography-config(
+ $font-family: '"Noto Sans JP", sans-serif',
+ );
+ @include mat.all-component-typographies($myapp-typography);
可以使用mat.define-typography-config()创建一个配置对象，并使用mat.all-component-typographies()进行应用。
闲谈
@forward './core/typography/all-typography' show all-component-typographies,
define-rem-typography-config, define-typography-config;
请参考
Customizing Typography | Angular Material
安心の公式
Angular Materialの見た目をカスタマイズしたい – JBS Tech Blog
v15。フォント以外についても詳しく書かれています（実際はこれくらい色々カスタムするのが普通？）
Angular Material のFontを変更する
v13で少し古いですが、参考にさせていただきました。
