如何更改材质v18中的字体系列

Question

我正在关注

的文档

https://material.angular.io/guide/theming#defining-a-theme

// From documentation

$theme: mat.define-theme((
  
  typography: (
    brand-family: 'Open Sans',
    bold-weight: 900
  ),
));

html {
    @include mat.core-theme($theme);
    @include mat.all-component-themes($theme);
    @include mat.all-component-typographies($theme);
}

并尝试了

的答案

Angular Material 上的字体系列更改

//  Answer based on stackoverflow

$my-theme: mat.define-theme($config: (
    typography: (
      plain-family: '"Open Sans", sans-serif',
      brand-family: '"Open Sans", sans-serif',
    ),
  ),);

  :root {
    @include mat.all-component-typographies($my-theme);
  }

所有选项都不起作用。让我知道如何更改 Material v18 上的字体系列

PS：不要评论，已经有答案了。这些适用于以前的版本，不适用于 v18

Answer 1

这是我对 Angular Material v18 的一般设置，它有效：

{
  ...
  dependencies: {
    ...
    "@angular/material": "^18.2.2",
    ...
  }
}

然后在我的

src/styles.scss

@use '@angular/material' as mat;
@include mat.core();

$custom-font-family: 'My Custom Font', sans-serif;
$custom-font-size: 16;
$custom-font-weight: 500;

$custom-body-typography-level: mat.m2-define-typography-level(
  $font-size: #{$custom-font-size}px,
  $font-weight: #{$custom-font-weight},
  $line-height: 1.3
);

$custom-typography: mat.m2-define-typography-config(
  $font-family: $custom-font-family,
  $body-1: $custom-body-typography-level,
);

$custom-app-primary: mat.m2-define-palette(mat.$m2-indigo-palette);
$custom-app-accent: mat.m2-define-palette(mat.$m2-cyan-palette, A200, A100, A400);

// Define the theme object.
$custom-theme: mat.m2-define-light-theme((
  color: (
    primary: $custom-app-primary,
    accent: $custom-app-accent,
  ),
  density: (
    scale: 0,
  ),
  typography: $custom-typography,
));

:root {
  @include mat.all-component-themes($custom-theme);
}

最后，在 angular.json 中

{
  ...
  "projects": {
    "your-project-name": {
      ...
      "architect": {
        "build": {
          ...
          ...
          "options": {
            ...
            "styles": [
              "src/styles.scss"
            ]
          }
        }
      }
    }
  }
}