angular переопределение типографики материала - передать 2 конфигурации в мат-ядро?

Question

В Angular с установленным Материалом Я пытаюсь переопределить Типографию Материала, чтобы включить 2 разных шрифта.

1. Я хочу 'Roboto' для всего тела / кнопки / текст заголовка,
2. и 'Roboto-Condensed' для всего заголовка / заголовка / отображаемого текста.

Как лучше всего это сделать?

Вот что я сделал в своих файлах S CSS до сих пор:

($ 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),
);

Я также хочу изменить различные стили шрифтов, например font -size, line-height, weight и т. д. c ..., поэтому я не просто сосредоточился на установке семейства шрифтов для каждого класса текста.

Это не работает (передача 2 конфигураций):

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

Я создал 2 разных конфигурации типографики, одну для текста заголовка и один для основного текста . они оба работают сами по себе, если я передаю их в mat-core, но я пытаюсь передать оба в mat-core одновременно - возможно ли это переопределение типографики с двумя разными семействами шрифтов, или должно Я go об этом иначе?

Даже с одним шрифтом возникают проблемы:

Когда я включаю только одну из конфигов в миксин mat-core, он изменяет ВСЕ текстовые элементы на семейство шрифтов (конфигурация заголовка с результатом в абзацах, кнопках и элементах списка становится «Roboto-Condensed»).

Я также попытался включить одну из двух конфигураций в эти директивы в соответствии с материалами. 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);

Answer 1

Думаю, я понял эту Angular Проблема с типографикой материала.

1. У вас может быть 2 семейства шрифтов (или больше?), По одному для каждого из 2 разных конфигурации (у меня одна для заголовков, одна для основного текста),
2. при условии, что вы используете 'и' SCSS / SASS-оператор между двумя конфигурациями в Angular. Типографика материала S CSS конструктор.

Вот усеченный пример настройки двух конфигураций:

(один для заголовков [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),
  // ...
);

Вот часть материала angular, в которой вы переопределяете 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/

Я должен его переписать, но, по крайней мере, вы найдете больше изображений и фрагментов, которые я пробовал, если вы хотите углубитесь в эту проблему.