Angular项目中如何替换默认Roboto字体？

云原生阿岚

2026-6-16

解决Angular中Muli字体替换Roboto不生效的问题

1. 修正Google Fonts引入格式

你当前使用的Muli字体链接是旧版格式，且与Roboto的请求分开，建议合并为新版v2链接以确保字体正确加载：
修改index.html中的字体链接：

<link rel="preconnect" href="https://fonts.gstatic.com">
<!-- 合并Roboto和Muli的请求，若不需要Roboto可仅保留Muli -->
<link href="https://fonts.googleapis.com/css2?family=Muli:wght@400;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">

2. 自定义Angular Material排版主题

Angular Material的默认排版会强制使用Roboto，需在主题配置中指定Muli为默认字体，覆盖组件级别的字体样式：
修改style.scss：

@use '@angular/material' as mat;

// 定义自定义排版，设置全局字体族为Muli
$custom-typography: mat.define-typography-config(
  $font-family: 'Muli', 'Helvetica Neue', sans-serif
);

// 将自定义排版加入主题配置
$theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$blue-palette,
      tertiary: mat.$magenta-palette,
    ),
    typography: $custom-typography,
  )
);

// 全局设置字体，确保优先级
html, body {
  font-family: 'Muli', 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 30px;
  height: 100%;
}

// 应用Material组件主题和自定义排版
@include mat.all-component-themes($theme);
@include mat.all-component-typographies($custom-typography);

:host {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

注意：将@include mat.all-component-themes($theme)从html,body选择器中移出，混合宏需在全局作用域生效。