Fontawesome webfonts 自 webpack 构建以来有时无法加载

Question

我刚刚将我们项目中旧的 css 和 js 构建过程从 grunt（和 less 中的 css）迁移到 webpack 5（和 scss 中的 css），一切看起来都很好。但是，存在一个问题： 有时而不是像这样

这是 DevTools 中的心脏的样子：

.fa-heart:before {
    content: "";
}

超赞的网络字体似乎没有正确加载，而是像这样加载

在 DevTools 中检查时，心脏看起来像这样

.fa-heart:before {
    content: "";
}

我本来希望看到

.fa-heart:before {
    content: "\f004";
}

当我在 DevTools 中手动将其更改为那个时，它就可以工作了。

当我在浏览器中启动 lighthouse 审计时，可以重现这一点： lighthouse 完成后的最后一次加载总是看起来像这样。

老实说，我什至不知道用谷歌搜索这个问题。 我尝试使用 webfontloader 加载字体，但这对解决问题没有帮助。

我在我的 main.scss 中包括这样的 fontawesome：

@import "~@fortawesome/fontawesome-pro/scss/fontawesome";
@import "~@fortawesome/fontawesome-pro/scss/light";
@import "~@fortawesome/fontawesome-pro/scss/solid";

这是我的 webpack 配置的简化（较少条目）版本：

module.exports = {
  entry: {
    './dist/styles.min': { import: './src/sass/main.scss' },
    './dist/scripts.min.js': { import: './src/js/scripts.js' },
  }
  module: {
    rules: [
      {
        test: require.resolve("jquery"),
        loader: "expose-loader",
        options: {
          exposes: ["$", "jQuery", "jquery"],
        },
      },
      {
        test: /\.s?[ac]ss$/i,
        use: [
          // Compiles Sass to CSS
          MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader",
        ],
      },
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [["@babel/preset-env", { debug: false, useBuiltIns: "usage", corejs: 3 }], "@babel/preset-react"],
            plugins: [["@babel/plugin-transform-runtime", { corejs: 3 }]],
          },
        },
      },
      {
        test: /(ignore)/,
        use: {
          loader: "ignore-loader",
        },
      },
      {
        test: /\.(png|jpe?g|gif|svg|ttf|eot|woff2?)$/i,
        use: [
           {
            loader: "file-loader",
            options: {
              outputPath: "dist/assets/",
              publicPath: "/assets/",
            },
          },
        ],
      },
    ]
  },
  output: {
    path: __dirname,
    filename: "[name]?[contenthash]",
  },
  resolve: {
    extensions: [".jsx", ".js", ".json"],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css?[contenthash]",
    }),
  ],
optimization: {
    minimize: !DEV_MODE,
    minimizer: [
      "...",
      new TerserPlugin({ extractComments: false }),
      new CssMinimizerPlugin(),
    ],
    splitChunks: {
      cacheGroups: {
        polyfills: {
          test: /[\\/]node_modules[\\/](@babel|core-js|regenerator|promise)/,
          name: "./dist/polyfills.min.js",
          chunks: "all",
        },
        vendor: {
          test: /[\\/]node_modules[\\/](slick|bootstrap|jquery)/,
          name: "./dist/vendor.min.js",
          chunks: "all",
        },
      },
    },
  },
}

Answer 1

"\f004"

实际上等同于

""

，但是字符

""

可能会出现，因为您的 CSS 缺少

@charset "UTF-8"

规则。它可能在最小化过程中被剥离。

它可能发生在 terser-webpack-plugin （见这个问题）。您可以尝试将以下内容添加到您的 web pack 配置中：

TerserPlugin({
  terserOptions: { output: { ascii_only: true } }
})

更多信息：https://medium.com/@thinkpanda_75045/webpack-with-unicode-7a2c5eb22afd

类似问题：https://github.com/FortAwesome/Font-Awesome/issues/17644

Answer 2

*要确定此解决方案是否能解决您的特定问题，您可以按照 步骤 10 进行操作，该步骤提供了一种直接的测试方法。

下面以网站使用频率最高的“fa-user”图标（Unicode 007）为例，详细说明我是如何解决怪异图标问题并获得正确结果的：

之前：[在此处输入图片描述][1]

之后：[在此处输入图片描述][2]

我尝试了什么：添加的建议已经出现在网站上。在我的 fontawesome.scss 顶部添加 @charset 'utf-8' 并没有解决奇怪图标的问题，这是因为 @charset 声明在编译时被删除了。

我们目前正在自托管 fontawesome 图标，使用它们的 fontawesome-subset 功能来减小文件大小，并使用 Sass 1.58.3、sass-loader 和 css-loader 以及 Webpack 4 来编译我们的 scss 文件。

这里有一些可以用来验证图标是否正确显示的步骤：我执行了以下步骤来确认结果的准确性：

1. 去网站。

2. 按 Ctrl+U 或右键单击并选择“查看页面源代码”。

3. 单击样式表的 href 链接。示例：

4. 搜索图标，例如“fa-user”。

5. 如果问题得到解决，图标应显示 Unicode 内容“f007”或正确的符号。 [在此处输入图片描述][3]

6. 如果图标显示为[?]，请在网络上搜索以确保其正确无误。

7. [在此处输入图片描述][4]

8. 复制并粘贴 [?] 到搜索引擎以检查它是否显示为 Unicode。 [在此处输入图片描述][5]

9. 这个解决方案适用于 fontawesome 5 和 6，因为我在这两个版本上都进行了测试。

10. 要执行快速检查并验证此解决方案是否能解决问题，您可以尝试添加@charset "utf-8"；在编译的 CSS 文件的开头。[在此处输入图像描述][6]

解决方案： 该问题的解决方案是添加 npm 包“[add-charset-webpack-plugin][7]”。这个包自动在所有最终 CSS 文件的第一行添加字符集声明，确保 UTF-8 编码被指定并被浏览器正确解释。

如何申请： 在你的 webpack.config.js 文件中：

1. 导入包： 从 'add-charset-webpack-plugin' 导入 AddCharsetWebpackPlugin;

2. 将插件添加到您的插件中：[] 部分： 新的 AddCharsetWebpackPlugin({ 字符集：“utf-8” }),

希望这有帮助！ [1]: [2]: [3]: [4]: [5]: [6]: [7]：https://www.npmjs.com/package/add-charset-webpack-plugin