覆盖角材料主体排版


Overriding Angular Material body typography

我已经在Angular(v 5.2.0)应用程序中使用Angular Material(v 5.2.4)创建了自定义主题。

my-theme.scss：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@import '~@angular/material/theming';

@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:300,400,500');

@include mat-core();

$my-theme-primary: mat-palette($mat-deep-orange);
$my-theme-accent:  mat-palette($mat-amber, A200, A100, A400);
$my-theme:   mat-light-theme($my-theme-primary, $my-theme-accent);
$my-typography: mat-typography-config(
  $font-family: '"IBM Plex Sans Condensed"'
);

.my-theme {
  @include angular-material-theme($my-theme);
  @include angular-material-typography($my-typography);
}

我还为我的应用程序的index.html页面中的body添加了类名称mat-app-background mat-typography。

当我将my-theme类添加到我的应用程序的容器中(在body内)时，所有材质组件都获得了自定义字体(用于单选按钮标签等)，但是外面没有任何内容组件获取它。

我也曾尝试使用angular-material-typography()和mat-base-typography()混合插件无济于事。

如何覆盖mat-typography类中的字体？

相关讨论

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
    @import '~@angular/material/theming';
    @import './color_palette.scss'; // contains custom palette
    @import './app_theme.scss'; // contains app mixin

   $app-typography: mat-typography-config(
      $font-family: 'Muli, Roboto,"Helvetica Neue", sans-serif',
      $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, 400),
      $subheading-1:  mat-typography-level(15px, 24px, 400),
      $body-2:        mat-typography-level(14px, 24px, 500),
      $body-1:        mat-typography-level(14px, 20px, 400),
      $caption:       mat-typography-level(12px, 20px, 400),
      $button:        mat-typography-level(14px, 14px, 500),
        // Line-height must be unit-less fraction of the font-size.
      $input:         mat-typography-level(16px, 1.25, 400)
    );

    @include mat-core($app-typography);

    $primary: mat-palette($deeppurple); // $deeppurple form color_palette
    $accent:  mat-palette($blue);  // $blue form color_palette
    $warn:    mat-palette($red);  // $red form color_palette
    $theme:   mat-light-theme($primary, $accent, $warn);
    @include  app-theme($theme);  //app mixin from app_theme

    body, html {
      margin: 0;
      height: 100%;
      font-size: mat-font-size($app-typography, body-1);
      font-family: mat-font-family($app-typography);
      line-height: mat-line-height($app-typography, body-1);
    }
相关讨论

仅此一项(取自@Dharan G的答案)会将字体包含到所有组件中：

1
2
3
4
5
$config: mat-typography-config(
  $font-family: 'IBM Plex Sans Condensed, sans-serif'
);

@include mat-core($config);

已接受的问题为我指明了正确的方向，这就是我最终使它起作用的方式，以供将来参考：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
@import '~@angular/material/theming';

@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:300,400,500');

@include mat-core();

$my-theme-primary: mat-palette($mat-deep-orange);
$my-theme-accent:  mat-palette($mat-amber, A200, A100, A400);
$my-theme:   mat-light-theme($my-theme-primary, $my-theme-accent);
$my-typography: mat-typography-config(
  $font-family: '"IBM Plex Sans Condensed"'
);

.my-theme {
  @include angular-material-theme($my-theme);

  // this is what fixed it
  .mat-typography & {
    font-size: mat-font-size($my-typography, body-1);
    font-family: mat-font-family($my-typography, body-1);
    line-height: mat-line-height($my-typography, body-1);

    h1, h2, h3 {
      font-family: mat-font-family($my-typography, body-1);
    }
  }
}

如果index.html文件中包含Mat-typograph，则需要将其删除以覆盖Mat配置。

看起来这是一个古老的答案，但是被接受的答案并不能解决我的问题。

即使在检查DOM元素时应用了mat-typography中指定的字体，但从视觉上看，它仍以错误的字体显示文本。

我设法通过像这样按angular应用字体类来使其工作：

1
2
3
.font-fix {
  font-family: '<custom-font>';
}
1
Text displayed correctly!