已关闭 - Angular Material 排版无法正常工作

Question

我正在尝试为 Angular Material 创建我的自定义主题，但是当我应用排版时，一些元素改变了它自己的字体，但不是在所有应用程序中。例如，对于链接不起作用，对于网格列表元素也不起作用（我没有注意到它是否与更多 material 组件一起出现）。这是我的代码：

font.scss

@import url('https://fonts.googleapis.com/css?family=Indie+Flower&display=swap');

$fontConfig: mat-typography-config(
  $font-family: "'Indie Flower', cursive",
  $display-4: mat-typography-level(112px, 112px, 300),
  $display-3: mat-typography-level(56px, 56px, 400),
  $display-2: mat-typography-level(45px, 48px, 400),
  $display-1: mat-typography-level(34px, 40px, 400),
  $headline: mat-typography-level(24px, 32px, 400),
  $title: mat-typography-level(20px, 32px, 500),
  $subheading-2: mat-typography-level(16px, 28px),
  $subheading-1: mat-typography-level(15px, 24px),
  $body-2: mat-typography-level(14px, 24px, 500),
  $body-1: mat-typography-level(14px, 20px, 400),
  $button: mat-typography-level(14px, 14px, 500),
  $caption: mat-typography-level(12px, 20px, 400),
  $input: mat-typography-level(inherit, 1.125, 400),
);

theme.scss

@import '~@angular/material/theming';
@import './helpers/font';

@function create-custom-theme($primary, $accent, $warn: mat-palette($mat-red)) {
  @return (
    primary: $primary,
    accent: $accent,
    warn: $warn,
    is-dark: false,
    foreground: $my-theme-foreground,
    background: $my-theme-background,
  );
}

$custom-theme-primary: mat-palette($mat-green);
$custom-theme-accent: mat-palette($mat-blue);
$custom-theme-warn: mat-palette($mat-red);

$custom-theme: create-custom-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);

@include angular-material-theme($custom-theme);
@include mat-core($fontConfig);

styles.scss

@import "~@angular/material/theming";
@import '../themes/helpers/font';
.
.
.

有什么想法吗？

Answer 1

请您在 css 中添加。

body {
    font-family: 'Indie Flower', cursive;
}

我这边很管用

已关闭 - Angular Material 排版无法正常工作

CLOSED - Angular Material Typography doesn't work properly

typography

angular-material

custom-theme

angular

angular-material-theming