Question

我在Angular（v 5.2.0）应用中使用Angular Material（v 5.2.4）创建了一个自定义主题。

MY-theme.scss：

@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页面中为mat-app-background mat-typography添加了班级名称body。

当我将my-theme类添加到我的应用容器（body内）时，所有材质组件执行获取自定义字体（用于事物）像单选按钮标签等），但组件外没有任何东西可以获得它。

我也尝试使用angular-material-typography()和mat-base-typography() mixin无效。

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

Answer 1

    @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);
    }

Answer 2

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

$config: mat-typography-config(
  $font-family: 'IBM Plex Sans Condensed, sans-serif'
);

@include mat-core($config);

Answer 3

如果您的 index.html 文件中有 mat-typograph，则需要将其删除以覆盖 mat 配置。

Answer 4

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

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

我设法通过有角度地应用像这样的字体类来使其工作：

.font-fix {
  font-family: '<custom-font>';
}

<div [class.font-fix]="true">Text displayed correctly!</div>

Answer 5

接受的问题指出了我正确的方向，这就是我最终将其运作的方式，以供将来参考：

@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);
    }
  }
}

覆盖Angular Material body排版

5 个答案: