javascript - 如何使用 Webpack 1.14 导入本地版本的 Google Material Icons .woff2？

Question

我从同一文件夹导入 Google Fonts .woff2 文件没有问题，但导入 Material Icon 文件被证明无法使用相同的设置。 .woff2 文件根本没有显示在我的开发人员工具下的源代码中。我正在 Electron 中构建我的项目。

我已按照 Google 实现指南中的方法 2 实现了其余设置:https://google.github.io/material-design-icons/#icon-font-for-the-web

这有什么明显的问题吗？我还看到了许多 npm 包来使这变得更容易，但我不清楚它们如何使这变得更容易。感谢您提供的任何帮助。

我的 Webpack 字体加载器

  module: {
    loaders: [
      {
        test: /\.global\.css$/,
        loaders: [
          'style-loader',
          'css-loader?sourceMap'
        ]
      },
      {
        test: /^((?!\.global).)*\.css$/,
        loaders: [
          'style-loader',
          'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
        ]
      },

      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
      { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' },
    ]
  },

Answer 1

我也遇到了同样的问题。最后我决定使用文件加载器而不是 url 加载器，这是对我有用的设置

webpack 文件:

...
     }, {
         test: /\.woff2$/,
         loader: 'file-loader?name=[name].[ext]'
     }, {
...

然后在css文件中您可以加载字体文件:

@font-face {
    font-family: 'MyFontName';
    src: url('../path_to_font/font_name.woff2') format('truetype');
    font-weight: normal;
    font-style: normal;
}

然后您可以使用您的字体:font-family: 'MyFontName';

此设置的重要之处在于 css 文件中的 url - 字体文件的路径必须相对于 css > 您在其中使用字体的文件。