Angular 10 + SCSS:使用@font-face时浏览器不请求字体

Question

我有一个使用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;
}

I‘m @import-ing this I my main styles.scss file：

@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中预加载我的字体，浏览器确实发出了请求，但字体没有被应用。

有人能指出为什么会发生这种情况吗？

附言:这是我的assets文件夹结构：

​

​

Answer 1

我知道为时已晚，但在我的例子中，我的字体被角度材料主题覆盖了。你可以通过查看devtools中的计算样式来进行检查。如果是这种情况，那么建议为angular材质创建自定义排版。