材质设计图标，webpack和angularjs加载错误图标

Question

我正在使用材质设计图标(https://materialdesignicons.com/)，并在我的angularjs应用程序中使用webpack加载它们。古普为我的网页提供服务。我的webpack配置文件包含以下字体代码：

{ test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, loader : 'url-loader' }

我面临的问题是，正在渲染的网页显示了错误的图标。当我使用file-loader而不是url-loader时，我在控制台中得到以下警告。

Failed to decode downloaded font, OTS parsing error: Failed to convert WOFF 2.0 font to SFNT

找不到这个问题。提前谢谢。

Answer 1

{ test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/, loader: 'url-loader?limit=100000' }

你可以在你的字体上尝试一下。这对我很有效。

Answer 2

试试这两个加载器：

{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }