javascript - font-face 样式组件 - 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 配置。

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

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

2. 安装依赖项：npm install

3. 运行项目：npm start

标签： javascriptwebpackstyled-components

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]',
    },
  },
},