字体样式的组件-OTS解析错误：版本标记无效

Question

我正在尝试将几种本地字体添加到新网站。字体似乎已正确下载，并且字体定义如下：

@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/roboto-mono-v5-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto Mono'), local('RobotoMono-Regular'),
     url('/fonts/roboto-mono-v5-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('/fonts/roboto-mono-v5-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
     url('/fonts/roboto-mono-v5-latin-regular.woff') format('woff'), /* Modern Browsers */
     url('/fonts/roboto-mono-v5-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
     url('/fonts/roboto-mono-v5-latin-regular.svg#RobotoMono') format('svg'); /* Legacy iOS */
}

但仍然出现以下错误：

您可以检查我的Webpack配置 here。

这是一个公共仓库，在本地运行项目时可以重现该问题：

1. 克隆：git clone -b feature/font-faces https://github.com/webmadeira/webmadeira.github.io.git

2. 安装依赖项：npm install

3. 运行项目：npm start

Answer 1

解决方案是从以下位置更改我的webpack配置：

{
  test: /.(png|jpg|jp(e)?g|svg)(\?[a-z0-9]+)?$/,
  use: {
    loader: 'file-loader',
    options: {
      publicPath: 'images',
      name: '/[name].[ext]',
    },
  },
},

收件人：

{
  test: /.(png|jpg|jp(e)?g|svg)(\?[a-z0-9]+)?$/,
  use: {
    loader: 'file-loader',
    options: {
      name: 'images/[name].[ext]',
    },
  },
},