时间戳

首页 > 解决方案 > 角度材料排版覆盖 - 将 2 个配置传递给 mat-core？

angular - 角度材料排版覆盖 - 将 2 个配置传递给 mat-core？

问题描述

在安装了 Material 的 Angular 中，我试图覆盖 Material Typography 以包含 2 种不同的字体。

  1. 我想要所有正文/按钮/标题文本的“Roboto”，
  2. 以及所有标题/标题/显示文本的“Roboto-Condensed”。

最好的方法是什么？

到目前为止，这是我在 SCSS 文件中所做的：

($title-font = Roboto-Condensed, $primary-font = Roboto)

// https://material.angular.io/guide/typography 

@import '~@angular/material/theming';

// Define a custom typography config that overrides the font-family as well as the other `headlines` and `body-1` levels. 
$custom-heading-typography: mat-typography-config(
  $font-family: $title-font,
  $display-4: mat-typography-level($d4, $disp-line-ht, $light),
  $display-3: mat-typography-level($d3, $disp-line-ht, $regular),
  $display-2: mat-typography-level($d2, $title-line-ht, $regular),
  $display-1: mat-typography-level($d1, $title-line-ht, $regular),
  $headline: mat-typography-level($h1, $title-line-ht, $bold),
  $title: mat-typography-level($h2, $title-line-ht, $regular),
  $subheading-2: mat-typography-level($h3, $title-line-ht $regular),
  $subheading-1: mat-typography-level($h4, $title-line-ht, $light),
);
$custom-body-typography: mat-typography-config(
  $font-family: $primary-font,
  $body-1: mat-typography-level($primary-fs, $primary-line-ht, $regular),
  $body-2: mat-typography-level($primary-fs, $primary-line-ht, $medium),
  $caption: mat-typography-level($font-sm, $caption-line-ht, $regular),
  $button: mat-typography-level($primary-fs, $disp-line-ht, $medium),
  $input: mat-typography-level(inherit, $input-line-ht, $regular),
);

我还想更改各种字体样式，例如字体大小、行高、粗细等...，所以我不仅仅专注于为每个文本类设置字体系列。

这不起作用（通过 2 个配置）：

// Override the typography in the core CSS.
@include mat-core($custom-heading-typography, $custom-body-typography);

我创建了 2 种不同的排版配置，一种用于标题文本，一种用于正文。如果我将它们传递给 mat-core，它们都可以自行工作，但我试图同时将两者传递给 mat-core——这种排版是否可以使用 2 种不同的字体系列覆盖，或者我应该继续这是另一种方式？

即使只有 1 种字体，也存在问题：

当我在 mat-core mixin 中仅包含一个配置时，它会将所有文本元素更改为字体系列（导致段落、按钮和列表项为“Roboto-Condensed”的标题配置）。

我还尝试根据 Material.Angular 排版文档在这些指令中包含两个配置之一，但行为是不可预测的，并且还可能导致所有元素具有相同的字体系列。

试过这个： 

// Override typography CSS classes (e.g., mat-h1, mat-display-1, mat-typography, etc.).
@include mat-base-typography($custom-heading-typography);

也试过这个：

// Override typography for all Angular Material, including mat-base-typography and all components.
@include angular-material-typography($custom-heading-typography);

标签： angularangular-materialoverridingcustomizationtypography

解决方案

我想我已经解决了这个 Angular Material Typography 问题。

  1. 您可以有2 个字体系列（或更多？），一个用于2 个不同的配置（我有一个用于标题，一个用于正文），
  2. 只要您在 Angular.Material 排版 SCSS 构造函数中的两个配置之间使用“和”SCSS/SASS 运算符。

这是设置 2 个配置的截断示例：

（一个用于标题 [Roboto Condensed]，一个用于正文 [Roboto]）

// First custom Material typography config
$custom-heading-typography: mat-typography-config(
  /* First font family ('Roboto Condensed') */
  $font-family: $title-font,
  // ...
  $display-1: mat-typography-level($d1, $title-line-ht, $regular),
  $headline: mat-typography-level($h1, $title-line-ht, $regular),
  // ...
);
// Second custom Material typography config
$custom-body-typography: mat-typography-config(
  /* Second font family ('Roboto') */
  $font-family: $primary-font,
  // ...
  $body-2: mat-typography-level($primary-fs, $primary-line-ht, $medium),
  $caption: mat-typography-level($primary-fs, $caption-line-ht, $light),
  // ...
);

这是您覆盖 mat-base-typography 的角材料部分。

请注意@include语句中两个配置之间的简单“和”运算符。

它似乎有效，但如果我切换配置声明的顺序，我会得到截然不同的字体样式。因此，我不确定它是“正确”的解决方案，但它是我在所有搜索中找到的最好的......

// Override typography for all Angular Material, including mat-base-typography and all components.
/* This works if you put the typography configs in the correct order!? */
@include angular-material-typography($custom-heading-typography and $custom-body-typography);

这是一篇写得很糟糕的博客，

...我尝试了几种方法，首先认为这种方式行不通，然后决定是否可行。

https://krisbunda.com/blog/2020/08/01/use-2-fonts-in-your-angular-material-custom-typography-config/

我应该重写它，但如果你想深入研究这个问题，至少你会找到更多我尝试过的图像和片段。

推荐阅读