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

【问题标题】：WebPack custom font loading resulted OTS PARSING ERROR: invalid sfntVersion:WebPack 自定义字体加载导致 OTS PARSING ERROR: invalid sfntVersion:
【发布时间】：2021-09-28 17:59:33
【问题描述】：

我正在使用 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 解析错误: invalid sfntVersion: 1702391919

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

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

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

就在 chrome 和 firefox 中。

任何帮助和建议都值得赞赏！

提前致谢！

【问题讨论】：

标签： webpack fonts

【解决方案1】：

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

您可以通过使用解决问题问题

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

而不是

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

【讨论】：

【解决方案2】：

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

【讨论】：