如何在Single-SPA+Angular项目的CSS文件中正确导入字体？

云原生阿岚

2026-8-18

Single-SPA + Angular 字体导入失效的解决方案

当在Single-SPA架构的Angular子应用中使用@font-face导入字体失效时，核心问题是资源路径未适配微前端的挂载机制，以下是具体解决方法：

调整字体路径为相对路径
若字体文件放在Angular子应用的src/assets/fonts/effra/目录下，将CSS中的路径改为相对当前CSS文件的路径。比如全局样式文件styles.css在src/目录下，路径应写为：
```
@font-face {
  font-family: "Effra";
  src: url("./assets/fonts/effra/Effra-BoldItalic.woff2") format("woff2"),
       url("./assets/fonts/effra/Effra-BoldItalic.woff") format("woff");
}
```
如果是组件内的CSS文件，需根据文件层级调整相对路径（比如../assets/fonts/...）。
确保字体文件被正确打包
检查angular.json的assets配置，确认包含src/assets，这样字体文件才会被打包到dist目录的对应位置：
```
"assets": [
  "src/favicon.ico",
  "src/assets"
]
```
构建时使用相对base href
构建Angular子应用时，添加--base-href ./参数，让资源路径以相对方式加载，适配Single-SPA的子应用挂载路径：
```
ng build --base-href ./
```