如何在Angular 15中全局配置自定义font-face到Typography？

问题排查与修复步骤 #

1. 修复@font-face语法错误 #

你的typography.scss中缺少必要分号，导致CSS解析失败：

// assets/fonts/typography.scss
@font-face {
  font-family: 'Barlow'; // 补充分号
  src: url(./Barlow-Medium.woff) format('woff'); // 补充分号
}

2. 修正styles.scss中的导入路径 #

styles.scss通常位于src/目录下，字体文件在src/assets/fonts/，需调整导入路径：

// src/styles.scss
@import './assets/fonts/typography.scss'; // 修正路径

3. 修复Material主题结构错误 #

你将typography配置嵌套在了color对象中，不符合Material主题规范，需将其与color同级：

$my-app-theme: mat.define-light-theme((
  color: (
    primary: $my-app-primary,
    accent: $my-app-accent,
    warn: $my-app-warn,
  ),
  typography: $my-typography, // 移到color对象外，与color同级
));

4. 修正typography-level参数顺序 #

mat.define-typography-level的参数顺序为：font-size, line-height, font-weight, font-family，参数顺序错误会导致字体无法生效：

// 为headline和title设置正确的参数顺序
$my-typography: mat.define-legacy-typography-config(
  $headline: mat.define-typography-level(32px, 40px, 500, 'Barlow'), // <h1>
  $title: mat.define-typography-level(18px, 24px, 600, 'Barlow'), // <h2>
);

5. 定义Material基础调色板 #

你直接使用$primary但未定义，需先导入Material主题文件并指定基础调色板：

// 导入Material主题基础文件
@import '@angular/material/theming';

// 定义基础调色板（示例用indigo，可按需替换）
$primary: mat.$indigo-palette;
$my-app-primary: mat.define-palette($primary);
$my-app-accent: mat.define-palette($primary);
$my-app-warn: mat.define-palette($primary);

6. 确认全局样式应用 #

保持index.html中body的mat-typography类：

<body class="mat-typography">
  <app-root></app-root>
</body>

内容的提问来源于stack exchange，提问作者LaCodeM