Angular项目中SCSS字体文件无法加载的问题求助

我的字体文件无法下载，也无法在DOM中渲染。尝试多种办法后仍无法加载，求帮忙解决！

fonts.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": []
          }

项目结构 #

网络控制台 #

控制台 #

解决步骤 #

1. 修正@font-face语法错误
   你当前的font-family写法不符合规范，不应将后备字体sans-serif写入font-family属性中，同一字体族的不同权重应共用一个字体名称，通过font-weight区分。修正后的代码：

   @font-face {
     font-family: 'Montserrat';
     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';
     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';
     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;
   }
   

   调用时指定字体族和对应权重：

   span {
     font-family: 'Montserrat', sans-serif;
     font-weight: 600;
     font-size: 25px;
   }
   

2. 核对字体文件路径
   从项目结构看，fonts.scss位于src/styles目录，../assets/fonts/指向src/assets/fonts/，需确认该目录下存在对应字体文件，文件名、后缀完全匹配（注意Linux环境区分大小写）。

3. 确认Angular资源配置
   检查angular.json的assets配置是否包含src/assets，确保字体文件会被打包：

   "assets": [
     "src/favicon.ico",
     "src/assets"
   ]
   

4. 清理缓存并重建项目
   执行命令清理缓存后重新构建：

   ng cache clean
   ng build --prod
   ng serve
   

5. 排查路径问题
   控制台显示404错误，说明路径不匹配，可尝试改用绝对路径/assets/fonts/[文件名]测试。

内容的提问来源于stack exchange，提问作者DLx