Angular 如何使自定义字体不'；生产后不在根部出现

我在我的网站上使用自定义字体，包括令人敬畏的字体

在my styles.css中，我使用了：

 @font-face {
    font-family: "sf-compact-display-regular";
    src: url("../fonts/SF-Compact-Display-Regular.otf") format("opentype"),
    url("../fonts/SF-Compact-Display-Regular.otf") format("woff");
}

@font-face {
    font-family: "sf-compact-display-medium";
    src: url("../fonts/SF-Compact-Display-Meduim.otf") format("opentype"),
    url("../fonts/SF-Compact-Display-Meduim.otf") format("woff");
}

在

ng build--aot--prod-c=production

之后，我的所有字体都出现在

dist

文件夹中，如下所示：

我试图将

。/font

更改为

/assets/font/

，但没有显示dist中的字体，但url变为

http://localhost:3030/assets/fonts/myfont.otf

而它应该是

http://localhost:3030/myproject/assets/fonts/myfont.otf

我不想更改index.html中的base，因为我希望所有路径都是动态的，这样我就可以在任何地方部署

我还试图制作

myFontStyles.css

，并将其包含在angular.json中，但问题是相同的

如何在制作后从资源而不是从dist root读取所有字体

我不想更改index.html中的base，因为我希望所有路径都是动态的，这样我就可以在任何地方部署

我认为这里的解决方案是在build命令中指定基本href路径

ng build --aot --prod -c=production --base-href /myproject/

或

---

您可以将字体文件添加到angular.json“assets”数组中。

在

/font

之前添加

~/assets

在构建项目中的

/myproject/

期间，将用

基href

替换波浪号

因此，它既适用于开发，也适用于生产。：）

 @font-face {
    font-family: "sf-compact-display-regular";
    src: url("~/assets/fonts/SF-Compact-Display-Regular.otf") format("opentype"),
    url("~/assets/fonts/SF-Compact-Display-Regular.otf") format("woff");
}

@font-face {
    font-family: "sf-compact-display-medium";
    src: url("~/assets/fonts/SF-Compact-Display-Meduim.otf") format("opentype"),
    url("~/assets/fonts/SF-Compact-Display-Meduim.otf") format("woff");
}