如何在 Angular 18 和 Material 3 中使用 Roboto 以外的字体

Answer 1

首先确保将

font

添加到

index.html

。

  ...
  <!-- custom font -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
    href="https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Pre:[email protected]&family=Open+Sans:wght@300&display=swap"
    rel="stylesheet"
  />
</head>

在此之后，在

styles.scss

中，您必须首先定义

typography-object

。有效值为。

_config-validation.scsss

  $allowed: (
    brand-family,
    plain-family,
    bold-weight,
    medium-weight,
    regular-weight,
    use-system-variables,
    system-variables-prefix
  );

然后将此定义映射到

define-theme

、

typography

属性，如下所示。

$theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
    ),
    typography: $typography-config,
    // <- notice!
  )
);

即使在这些更改之后，您也不会看到正在应用的类型，我们必须调用方法

mat.typography-hierarchy

将版式应用到组件。

@include mat.core();
@include mat.color-variants-backwards-compatibility($theme);
@include mat.typography-hierarchy($theme); // <- notice!

完整代码：

@use '@angular/material' as mat;

$typography-config: (
  // <- notice!
  plain-family: 'Edu AU VIC WA NT Pre',
  // <- notice!
  brand-family: 'Edu AU VIC WA NT Pre',
  // <- notice!
); // <- notice!

$theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
    ),
    typography: $typography-config,
    // <- notice!
  )
);

body {
  font-family: Roboto, 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 30px;
  height: 100%;

  @include mat.all-component-themes($theme);
}

html {
  height: 100%;
}

@include mat.core();
@include mat.color-variants-backwards-compatibility($theme);
@include mat.typography-hierarchy($theme); // <- notice!

Stackblitz 演示