WebPack自定义字体加载导致OTS分析错误：无效的sfntVersion：

bmvo0sr5 于 2022-11-13 发布在 Webpack

关注(0)|答案(2)|浏览(643)

我正在使用webpacker和开发简单的静态html网站，但自定义字体加载导致OTS解析错误：无效的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;
}

这是我得到的错误。无法解码下载的字体：1 OTS解析错误：无效的sfntVersion：1702391919
当我直接输入url http://localhost:8080/c5d65aebe9531b4bbcb6.ttf?-fvbane时，它会在浏览器中下载字体。所以我相信文件指向正确。
但不确定导致此问题的原因。
奇怪的是它在Safari浏览器中运行良好。
只有chrome和firefox版本。
任何帮助和建议都将不胜感激！
提前感谢！

webpack

来源：https://stackoverflow.com/questions/68468150/webpack-custom-font-loading-resulted-ots-parsing-error-invalid-sfntversion

2条答案

按热度按时间

xn1cxnb41#

当尝试将字体的自定义加载程序与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]";
      },
    },
  }, 
]

赞(0）回复(0）举报 2022-11-13

goucqfw62#

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

赞(0）回复(0）举报 2022-11-13