VueJS - 引导图标：无法解码下载的字体，sfntVersion 无效答案

【问题标题】：VueJS - Bootstrap icons: Failed to decode downloaded font, invalid sfntVersionVueJS - 引导图标：无法解码下载的字体，sfntVersion 无效
【发布时间】：2021-10-15 10:48:31
【问题描述】：

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

解码下载的字体失败

OTS 解析错误：sfntVersion 无效：1008813135

用于引导图标的 .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，它在我的开发服务器上运行良好。

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

【问题讨论】：

标签： vue.js bootstrap-4 icons

【解决方案1】：

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

上面有很多解决方案，我希望其中一个对您有所帮助。

【讨论】：

【解决方案2】：

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

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

【讨论】：