Angular Material 2：对标题使用不同的字体配置？答案

【问题标题】：Angular Material 2: use a different font config for headers?Angular Material 2：对标题使用不同的字体配置？
【发布时间】：2019-07-05 11:18:16
【问题描述】：

我在 Angular 7 上有一个 Angular Material 2 应用程序。

我遵循documentation for typography 并定义了基本排版：

$sc-typography-config: mat-typography-config(
  $font-family: '"Helvetica Neue", Helvetica, Arial, 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, 18px, 400),
  $button: mat-typography-level(14px, 14px, 500),
  $input: mat-typography-level(14px, 1.25, 400)
);

然后按照文档中的描述在mat-core mixin 中定义此配置：

@include mat-core($sc-typography-config);

很好。

但是，我想为所有标题（显示、标题、标题）使用不同的配置。所以我做了第二个配置：

$brand-typography-config: mat-typography-config(
  $font-family: 'PrecisionSans,"Helvetica Neue", Helvetica, Arial, sans-serif'
);

我可以将它应用到按钮之类的东西上

@include mat-button-typography($brand-typography-config);

但是如何覆盖显示-、标题-、副标题-*、标题等？

【问题讨论】：

标签： angular angular-material material-design angular-material2

【解决方案1】：

mat-typography-level的参数：

@function mat-typography-level(
    $font-size,
    $line-height: $font-size,
    $font-weight: 400,
    $font-family: null,
    $letter-spacing: null)

所以我认为你应该可以这样使用它：

$alternative-font-family: 'PrecisionSans,"Helvetica Neue", Helvetica, Arial, sans-serif';
$sc-typography-config: mat-typography-config(
    $font-family: '"Helvetica Neue", Helvetica, Arial, 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, $alternative-font-family), // <---
    $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, 18px, 400),
    $button: mat-typography-level(14px, 14px, 500),
    $input: mat-typography-level(14px, 1.25, 400)
);

【讨论】：