生产后如何使自定义字体不在根目录中

Question

我正在网站上使用自定义字体，包括超棒的字体。

在我的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文件夹中，如下所示：

我试图将../fonts更改为/assets/fonts/，并且dist中没有出现字体，但是URL变成了http://localhost:3030/assets/fonts/myfont.otf，而应该是http://localhost:3030/myproject/assets/fonts/myfont.otf。

我不想更改index.html中的基础，因为我希望所有路径都是动态的，因此可以部署到任何地方。

我也尝试制作myFontStyles.css并将其包含在angular.json中，但存在相同的问题。

生产后如何从资产而不是dist根目录读取所有字体。

Answer 1

在~/assets之前添加/fonts。

波浪号在构建期间将由base-href替换为/myproject/。

因此它适用于开发和生产。 ：）

 @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");
}

Answer 2

  

我不想更改index.html中的基础，因为我希望所有路径都是动态的，因此可以部署到任何地方。

我认为这里的解决方案是在build命令中指定您的base-href路径。

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

OR

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