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

我正在尝试确定应用程序中默认包含哪些字体权重。我们正在使用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字体在哪里加载，和/或我可以在哪里确定包含哪些字体权重？我想自定义可用的字体权重

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

---

默认情况下，“角度材质”不会为您加载默认的Roboto字体。你必须自己包含它们

---

有关更多信息，请参阅。

有关此问题的更好解释：

事实上，文档描述您也需要为字体添加url。但是，这只适用于您自己的段落、标题、跨度等。。。任何材质组件都已使用Roboto字体。即使没有在index.html中添加链接。我猜OP是在问这些字体是从哪里来的，因为他没有包括它们

可能的答案：

---

和都可在npm上使用。所以我猜组件就是有这种依赖性的。在“网络”选项卡中没有对它们的任何调用，因此它们必须已经存在。

您确定它们已加载吗？ 要检查它，请打开google chrome开发工具->网络->按字体过滤请求。如果你看不到字体加载-你没问题。但如果您在那里看到它们，您可以将鼠标悬停在“启动器”上，深入调查是谁发起了请求

---

如何加载roboto字体？

好的，如果您没有包含指向Roboto字体的链接URL，它将不会被加载

材质中的CSS样式将指定以下字体和回退

Roboto, "Helvetica Neue", sans-serif

但是Roboto字体不会被实际加载（仅仅因为您在CSS中指定它并不意味着它会被应用）。相反，如果您自己没有在任何地方包含字体，浏览器将无法找到Roboto字体，并将使用备用字体

Helvetica Neue

；如果浏览器找不到该字体，它将使用浏览器的默认字体，默认情况下，Chrome的默认字体是

Times new Roman

（您可以通过在url栏中输入以下内容来检查Chrome中的默认字体：chrome://settings/fonts)

要验证上述内容，只需手动从给定元素的CSS检查器中删除

Roboto，

，您将看到页面上显示的字体实际上没有改变。这是因为浏览器已使用默认字体

指定的Roboto字体在哪里？

字体在

@angular/material/_theming.scss

文件中指定（v 5.2.0的第1443行）

您在导入时包含了该文件

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

在哪里指定字体大小？

默认字体大小由

mat排版级别到styles

mixin包含在与上述相同的文件中（对于v5.2.0，h2的第1498行）

---

你是说你想要角材质支持的字体列表？不。（我甚至不知道这意味着什么，因为任何字体都可以加载。）我问的是，在Angular CLI生成的全新、通用、默认应用程序中，字体在哪里加载。您似乎提出了两种包含字体文件的不同方法。这不是我想要的。我误解了吗？事实似乎并非如此，因为我们应用程序中唯一的字体链接是图标。@isherwood很抱歉，你能重新措辞吗？Roboto字体没有作为链接包含在我们的样式表或其他地方，但它显示在Angular Material的CSS中。是的。。。Angular Material希望您包括Roboto字体，但他们不会为您提供。事实证明，您是对的。我的错误是认为Chrome中的计算样式指示了实际应用的内容。事实并非如此。Roboto字体实际上没有加载。谢谢。我们在几个主要元素上添加了

mat排版

类，从而为您提到的通用元素设置样式。我认为您可能是对的，它们是包dep，但我仍然需要确定加载了哪些权重（如果知道什么包加载它们，那就太好了）。我可以在浏览器的文档检查器中进行实验，但这似乎不太令人满意。它们必须被加载——正如我在问题中提出的机器人字体正在被应用。它不会出现在“网络”选项卡中。唯一的字体是图标。

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

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