vue.js - 无法解码下载的字体。 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;
  }