无法解码下载的字体。 OTS 解析错误。浏览器

Question

我正在尝试在我的 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

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

Answer 1

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

例子

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

Answer 2

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

无法解码下载的字体。 OTS 解析错误。浏览器

Failed to decode downloaded font. OTS parsing error. VueJs

fonts

sass

webfonts

webpack

vue.js