Scss 字体文件未加载到 Angular 项目中

Question

我的字体无法下载并且未在 DOM 中呈现。 我已经测试了很多东西，但是这个该死的字体没有加载。 预先感谢您的帮助！

字体.scss：

@font-face {
  font-family: Montserrat, sans-serif;
  src: url('../assets/fonts/Montserrat-Regular.woff2') format('woff2'),
  url('../assets/fonts/Montserrat-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Montserrat-Medium, sans-serif;
  src: url('../assets/fonts/Montserrat-Medium.woff2') format('woff2'),
  url('../assets/fonts/Montserrat-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Montserrat-SemiBold, sans-serif;
  src: url('../assets/fonts/Montserrat-SemiBold.woff2') format('woff2'),
  url('../assets/fonts/Montserrat-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

styles.scss（span样式用于测试）：

@import 'styles/fonts.scss';

span {
  font-family: Montserrat-SemiBold, sans-serif;
  font-size: 25px;
}

angular.json：

        "build": {
          "options": {
            "styles": [
              "src/styles/fonts.scss",
              "src/styles.scss"
            ],
            "scripts": []
          },

        "test": {
          "options": {
            "styles": [
              "src/styles/fonts.scss",
              "src/styles.scss"
            ],
            "scripts": []
          }

项目结构：

网络控制台：

控制台：

Answer 1

解决 Angular 18 字体问题：

在 Angular 18 中，assets 文件夹已被公共文件夹取代，用于管理字体等静态文件。通过这种新方法，您可以将字体放置在公共文件夹中，并通过文件名直接引用它们，而无需路径。

示例：

如果这是字体的名称：

"fonts/Montserrat-Thin.ttf"

所以你用字体写：

  src: url('/fonts/Montserrat-Thin.ttf') format('truetype');

所有代码：

@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

而且您不必写下所有路线。