Где загружаются шрифты в приложении Angular с использованием основной темы Angular Material?

Question

Я пытаюсь определить, какой вес шрифта включен по умолчанию в мое приложение. Мы используем Angular 5.2.5 и Angular Material2 (v5.2.1) с включенной основной темой AM:

@import '~@angular/material/theming';
@include mat-core();

Наша пользовательская тема определяет только цвет. Ссылки на шрифты не указаны, но Roboto по-прежнему используется по умолчанию, как видно из инспектора документов:

.mat-card[_ngcontent-c36] {
    font-family: Roboto, "Helvetica Neue", sans-serif;
}

.mat-h2[_ngcontent-c36], .mat-title[_ngcontent-c36] {
    font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif;
}

Вся документация и руководства, которые я нахожу, описывают, как настроить или переопределить шрифты по умолчанию. Где загружается шрифт Roboto и / или где я могу определить, какой вес шрифта включен? Я бы хотел настроить вес шрифта.

Answer 1

Как загружается шрифт робото?

Что ж, если вы не включите URL ссылки на шрифт Roboto, он будет не загружен.

Стиль CSS из материала будет указывать следующий шрифт и отступление

Roboto, "Helvetica Neue", sans-serif

но шрифт Roboto фактически не будет загружен (только потому, что вы указываете его в CSS, не означает, что он будет применен). Вместо этого, если вы нигде не включите шрифт самостоятельно, браузер не сможет найти шрифт Roboto и будет использовать резервный шрифт Helvetica Neue; если браузер не может найти этот шрифт, он будет использовать шрифт по умолчанию браузера, который по умолчанию равен Times new Roman для Chrome (вы можете проверить шрифты по умолчанию в chrome, введя это в строке URL: chrome: // settings / fonts)

Чтобы убедиться в этом, просто удалите Roboto, из инспектора CSS для данного элемента вручную, и вы увидите, что отображаемый шрифт на странице фактически не изменяется. Это потому, что браузер уже использует шрифт по умолчанию.

Где указан шрифт Roboto?

Шрифты указаны в файле @angular/material/_theming.scss (строка 1443 для версии 5.2.0)

@function mat-typography-config(
  $font-family:   'Roboto, "Helvetica Neue", sans-serif',

Вы сами включили этот файл в импорт

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

Где указаны размеры шрифта?

Размеры шрифтов по умолчанию включены в тот же файл, что и выше, в mat-typography-level-to-styles mixin (строка 1498 для h2 для v 5.2.0)

  .mat-h2, .mat-title, #{$selector} h2 {
      @include mat-typography-level-to-styles($config, title);
       margin: 0 0 16px;
     }

Answer 2

Вы уверены, что они вообще загружены? Чтобы проверить это, вы открываете google chrome dev tool -> сеть -> фильтруйте запросы по шрифтам. Если вы не видите загрузку шрифтов - все в порядке. Но если вы видите их там - вы можете пойти глубже и выяснить, кто инициирует запрос, наведя курсор на «инициатор».

Answer 3

По умолчанию Angular Material не загружает для вас шрифт Roboto по умолчанию. Вы должны включить их сами.

См. документы (Типография> Использование) для получения дополнительной информации.

Answer 4

Лучшее объяснение проблемы:

На самом деле, документы описывают, что вам нужно добавить URL для шрифтов. Однако это необходимо только для ваших собственных абзацев, заголовка, интервалов и т. Д. Любой компонент материала уже использует шрифт Roboto. Даже без добавления ссылки в index.html. Я полагаю, что ОП спрашивает, откуда эти шрифты, потому что он их не включает.

Возможный ответ:

На npm доступны как значки , так и шрифты . Поэтому я предполагаю, что компоненты просто имеют эту зависимость. во вкладке сети к ним нет вызовов, поэтому они уже должны быть там.

Answer 5

.angular-cli.json

...
"styles": [
    "https://fonts.googleapis.com/css?family=Roboto:300,400,500"
    "assets/scss/styles.scss",
]
...

client/src/styles.scss или любой файл стиля

@import url('https://fonts.googleapis.com/css?family=Roboto:300');