Question

我试图在我的Vue应用程序（使用Vue cli Webpack模板创建）的某个组件中导入Web字体。在我的一个组件中，我尝试通过引用项目中包含以下内容的_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

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

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

2 个答案: