Html 在产品生成中找不到字体相关文件路径

字体不是在prod build中加载，而是在localhost中加载

我正在使用下面的代码

\u Variable.scss：

 $fa-font-path: "../webfonts" !default;

固体。scss:

@import "variables";

@font-face {
  font-family: "Font Awesome 5 Pro";
  font-style: normal;
  font-weight: 900;
  font-display: $fa-font-display;
  src: url("#{$fa-font-path}/fa-solid-900.eot");
  src: url("#{$fa-font-path}/fa-solid-900.eot?#iefix")
      format("embedded-opentype"),
    url("#{$fa-font-path}/fa-solid-900.woff2") format("woff2"),
    url("#{$fa-font-path}/fa-solid-900.woff") format("woff"),
    url("#{$fa-font-path}/fa-solid-900.ttf") format("truetype"),
    url("#{$fa-font-path}/fa-solid-900.svg#fontawesome") format("svg");
}

"architect": {
        "build": {
          "builder": "ngx-build-plus:build",
          "options": {
            "outputPath": "dist/registrationApp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/webfonts",
              "src/assets",
              "src/config.json",
              "src/config.local.json"
            ],
            "styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "stylePreprocessorOptions": {
              "includePaths": ["./src/styles", "./node_modules/bootstrap/scss"]
            },

我构建了angular项目并运行index.html。字体图标未加载。它在C:/drive文件夹而不是我的项目生成文件夹中查找？

angular.json文件：

@import "variables";

@font-face {
  font-family: "Font Awesome 5 Pro";
  font-style: normal;
  font-weight: 900;
  font-display: $fa-font-display;
  src: url("#{$fa-font-path}/fa-solid-900.eot");
  src: url("#{$fa-font-path}/fa-solid-900.eot?#iefix")
      format("embedded-opentype"),
    url("#{$fa-font-path}/fa-solid-900.woff2") format("woff2"),
    url("#{$fa-font-path}/fa-solid-900.woff") format("woff"),
    url("#{$fa-font-path}/fa-solid-900.ttf") format("truetype"),
    url("#{$fa-font-path}/fa-solid-900.svg#fontawesome") format("svg");
}

"architect": {
        "build": {
          "builder": "ngx-build-plus:build",
          "options": {
            "outputPath": "dist/registrationApp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/webfonts",
              "src/assets",
              "src/config.json",
              "src/config.local.json"
            ],
            "styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "stylePreprocessorOptions": {
              "includePaths": ["./src/styles", "./node_modules/bootstrap/scss"]
            },

---

请指出哪里出了问题？

在

angular.json

文件中

找到构建对象并在其中添加

webfonts

文件夹

像

---

它将在您的构建中创建一个

assets

文件夹，并在assets中添加

webfont

文件夹。

将您的字体放在assets文件夹中，并给出引用它的相对路径，以便在构建webpack时完全复制资产文件并修改其相关路径

---

相反，我建议您使用一些部署在云中的cdn，这将更容易通过浏览器缓存它。

我添加了“src/webfont”。wefonts文件夹未在生成文件夹中创建？能否发布

angular.json

文件？。。。。还要确保webfonts文件夹与我的angular json文件一起出现在src folderI更新代码中。我的angular Projects中没有webfonts文件夹这是什么<代码>。/webfonts，我猜这是一个文件夹，您已经给出了相对路径。因此，您必须在src folder中保留文件夹的副本，以便在构建angular cli时将其添加到

资产中