Angular 10 + SCSS：浏览器在使用@font-face 时不请求字体答案

【问题标题】：Angular 10 + SCSS: Browser not requesting fonts when using @font-faceAngular 10 + SCSS：浏览器在使用@font-face 时不请求字体
【发布时间】：2021-01-18 17:16:41
【问题描述】：

我有一个使用 SCSS 的 Angular 10 应用程序。我在_typography.scss 中声明了一些@font-face 声明，指的是我的assets/fonts directory 中的字体。但是，在运行应用程序时，浏览器甚至不会发起下载字体文件的请求。

以下是样式目录：

这是我的_typography.scss：

@font-face {
    font-family: 'Spartan';
    src: 'assets/fonts/Spartan-Medium.ttf' format('truetype');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Spartan';
    src: 'assets/fonts/Spartan-SemiBold.ttf' format('truetype');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Spartan';
    src: 'assets/fonts/Spartan-Bold.ttf' format('truetype');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

我是 @import-ing 这个在我的主要 styles.scss 文件中：

@import 'reset';
@import 'variables';
@import 'typography';
@import 'utilities';

body {
    font-family: 'Spartan', 'Segoe UI';
    font-weight: 500;
    font-size: 0.75rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
}

只有Segoe UI 系统字体被应用。浏览器甚至没有发起对字体文件的请求：

然后我尝试在我的index.html 中预加载我的字体，浏览器确实发出了请求，但没有应用字体。

有人能指出为什么会这样吗？

P.S.：这是我的 assets 文件夹结构：

【问题讨论】：

您是否将字体添加到 Angular 资源中？路径是否正确？
@AliKianoor 我已经添加了我的assets 文件夹的结构。我提供的路径似乎是正确的，因为预加载请求确实有效，尽管浏览器仍然没有应用字体。即使路径不正确，至少请求可能有 404ed，但请求甚至没有发起。另外，我查看了构建的 CSS。 @font-face 规则存在于编译后的 CSS 中。
检查你在 angular.json 中的资产，并确保你已经像这样添加了资产文件夹： "assets": [ "src/assets", ],
@AliKianoor 是的，“资产”列表看起来不错："assets": ["src/favicon.ico", "src/assets"]

标签： css angular sass fonts

【解决方案1】：

我知道它已经很晚了，但在我的情况下，我的字体被 angular material 主题覆盖。你可以通过查看 devtools 中的计算样式来检查。如果是这种情况，则建议为有角材料创建自定义排版。

【讨论】：

我认为 Ashwin 正在教大家这个