无法解码下载的字体。 OTS 解析错误。 VueJs答案

【问题标题】：Failed to decode downloaded font. OTS parsing error. VueJs无法解码下载的字体。 OTS 解析错误。 VueJs
【发布时间】：2019-02-11 12:37:41
【问题描述】：

我正在尝试在我的 Vue 应用程序（使用 Vue cli webpack 模板创建）的某个组件中导入网络字体。在我的一个组件中，我尝试通过在具有以下内容的项目中引用 _fonts.scss 来导入字体：

@font-face {
  font-family: 'SomeFont';
  src: url('~/assets/fonts/SomeFont-Regular.woff2') format('woff2'),
  url('~/assets/fonts/SomeFont-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

然后，当我打开应用程序时，我收到此错误：

Failed to decode downloaded font: http://localhost:8080/assets/fonts/SomeFont-Regular.woff2
Failed to decode downloaded font: http://localhost:8080/assets/fonts/SomeFont-Regular.woff

还有这个：

OTS parsing error: invalid version tag
OTS parsing error: invalid version tag

我在网上搜索了这个问题，没有找到，或者一些相关情况

【问题讨论】：

标签： vue.js webpack fonts sass webfonts

【解决方案1】：

在 url() 中导入字体时尽量使用相对路径。没有'~/fontPath'

例子

@font-face {
    font-family: 'MyFont';
    src: url("../assets/fonts/MyFont.woff2") format('woff2');
    font-weight: normal;
    font-style: normal;
  }

【讨论】：

但这有什么帮助？！
这是正确答案，来自 SO 上的数百个答案。使用字体时，路径是第一个问题。我正在 VSC 中构建一个 VueJS 应用程序，我所做的只是将 /src/assets/fonts/icomoon.eot?uoqhn7 更改为 ../src/assets/fonts/icomoon.eot?uoqhn7 并且它有效。我不知道为什么。 Vue 在相对路径方面存在一些“问题”。 例如：在同一个文件中img src="@/assets/images/image.png" 可以工作，但src: url("@/assets/fonts/icomoon.eot?uoqhn7"); 不行。

【解决方案2】：

我遇到了同样的问题，在这里Vue Cli 3 Local fonts not loading 找到了答案。简而言之，您必须将 ../assets 替换为 ~@/assets。

【讨论】：