我在 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);
但是如何覆盖显示-、标题-、副标题-*、标题等?
最佳答案
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)
);
关于 Angular Material 2 : use a different font config for headers?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54639429/