VueJS - Bootstrap 图标：无法解码下载的字体，sfntVersion 无效

Question

我在我的 VueJS 应用程序中使用 bootstrap-图标。加载页面后出现这些错误

Failed to decode downloaded font

OTS parsing error: invalid sfntVersion: 1008813135

用于 bootstrap-图标的 .woff 和 .woff2 字体。

这里是 bootstrap-icons.css 文件中的字体加载部分：

@font-face {
  font-family: "bootstrap-icons";
  src: url("./fonts/bootstrap-icons.woff2?856008caa5eb66df68595e734e59580d") 
  format("woff2"),
  url("./fonts/bootstrap-icons.woff?856008caa5eb66df68595e734e59580d") format("woff");
}

这是我的 css 文件中 bootstrap 的导入：

// Bootstrap
@import 'bootstrap';
@import '~bootstrap-icons/font/bootstrap-icons';

这个错误也发生在我的生产服务器上，但是使用 Font-Awesome，它在我的开发服务器上工作正常。

您能否建议解决此问题的任何方法，或者问题的根源可能在哪里？我已经搜索了整个互联网，但仍然没有任何线索。

Answer 1

我不完全知道你的问题的解决方案，但我做了一些研究并发现了这个

上面有很多解决办法，希望其中一个对你有帮助。

Answer 2

我发现了问题。这是我的 public 文件夹不包含具有正确路径的字体。我使用错误中指定的路径将字体添加到文件夹中，现在一切正常。

P/S: 这可能是一个临时的解决方法，因为如果有多个图标包并且每个图标包都需要不同的字体路径，构建文件夹可能会超载吨 fonts 文件夹。有人会提出解决此问题的方法吗？

VueJS - Bootstrap 图标：无法解码下载的字体，sfntVersion 无效

VueJS - Bootstrap icons: Failed to decode downloaded font, invalid sfntVersion

vue.js

bootstrap-4

icons