WebPack 自定义字体加载导致 OTS PARSING ERROR: invalid sfntVersion:

Question

我正在使用 webpacker 并开发简单的静态 html 网站，但自定义字体加载会导致 OTS PARSING ERROR: invalid sfntVersion

这是我在 font.css 文件中设置的样式

@font-face {
    font-family: 'themify';
    src:url('../fonts/themify.woff') format('woff');
    src:url('../fonts/themify.eot?#iefix-fvbane') format('embedded-opentype'),
        url('../fonts/themify.woff?-fvbane') format('woff'),
        url('../fonts/themify.ttf?-fvbane') format('truetype'),
        url('../fonts/themify.svg?-fvbane#themify') format('svg');
    font-weight: normal;
    font-style: normal;
}

这是我得到的错误。无法解码下载的字体：http://localhost:8080/c5d65aebe9531b4bbcb6.ttf?-fvbane localhost/:1 OTS解析错误：无效的sfntVersion：1702391919

当我http://localhost:8080/c5d65aebe9531b4bbcb6.ttf?-fvbane直接输入 url 时，它会在浏览器中下载字体。所以我相信文件指向正确。

但不确定是什么原因导致这个问题。

奇怪的是它在 safari 浏览器中运行良好。

仅限 Chrome 和 Firefox。

任何帮助和建议都应该受到赞赏！

提前致谢！

Answer 1

当尝试对 webpack 5^ 的字体使用自定义加载器时，会出现此问题。Webpack 引入了一个新的 asset 模块功能，旨在替换字体、图像等的自定义加载器。

您可以使用以下方法解决问题

rules: [
  {
    test: /\.woff2?$/i,
    type: 'asset/resource',
    dependency: { not: ['url'] },
  }, 
]

代替

rules: [
  {
    test: /\.woff2?$/i,
    loader: "file-loader",
    options: {
      name(file) {
        return "[hash].[ext]";
      },
    },
  }, 
]

Answer 2

您正在使用该loaders模块吗？它已被弃用，我在使用该file-loader模块时遇到了同样的问题。迁移到使用资产模块并解决了同样的问题。