使用Angular Material核心主题在Angular应用程序中加载字体的位置在哪里？

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

默认情况下，Angular Material不会为您加载默认的Roboto字体。你必须自己包括它们。

有关详细信息，请参阅docs (Typography > Usage)。

Answer 2

对问题的更好解释：

确实，文档描述你需要添加字体的url。但是，这仅适用于您自己的段落，标题，跨度等...任何材质组件都已使用Roboto字体。即使没有在index.html中添加链接。我想OP正在询问这些字体的来源，因为他没有包含它们。

可能的答案：

icons和fonts都可以在npm上使用。所以我的猜测是组件只是具有依赖性。在网络标签中没有任何电话，所以他们必须在那里。

Answer 3

你确定它们完全装满了吗？ 要检查它，请打开谷歌浏览器开发工具 - ＆gt;网络 - ＆gt;按字体过滤请求。如果你没有看到字体加载 - 你没事。但是如果你在那里看到它们 - 你可以更深入地调查谁通过悬停在“发起者”上发起请求。

Answer 4

如何加载roboto字体？

好吧，如果你没有包含Roboto字体的链接URL，它将不加载。

材质中的CSS样式将指定以下字体和后备

Roboto, "Helvetica Neue", sans-serif

但Roboto字体不会被实际加载（只是因为你在CSS中指定它并不意味着它被应用）。相反，如果您不在任何地方自己包含字体，浏览器将无法找到Roboto字体并将使用后备字体Helvetica Neue;如果浏览器找不到该字体，则会使用浏览器的默认字体，默认情况下为Times new Roman Chrome（您可以在网址栏中输入以下内容检查Chrome中的默认字体：chrome：// settings /字体）

要验证上述内容，只需从CSS检查器中手动删除Roboto,给定元素，您就会看到页面上显示的字体实际上没有变化。这是因为浏览器已经在使用默认字体。

指定Roboto字体在哪里？

字体在@angular/material/_theming.scss文件中指定（第v43行第1443行）

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

您自己使用导入

包含该文件

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

指定字体大小在哪里？

默认字体大小与mat-typography-level-to-styles mixin包含在同一文件中（对于v 5.2.0，h2行为1498）

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

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');