CSS Failed to decode downloaded font, OTS parsing error: Failed to convert WOFF 2.0 font to SFNT

最近在看一些关于Web前端的资料,在处理一个CSS中出现以下错误,以此记录。

我在WebStorm下编译一个工程,并在上加载索引页,我得到以下警告在在Chrome控制台:

Failed to decode downloaded font: http://localhost:4200/assets/fonts/Simple-Line-Icons.woff2?v=2.4.0
OTS parsing error: Failed to convert WOFF 2.0 font to SFNT
Failed to decode downloaded font: http://localhost:4200/assets/fonts/Simple-Line-Icons.woff2?v=2.4.0
OTS parsing error: Failed to convert WOFF 2.0 font to SFNT
Failed to decode downloaded font: http://localhost:4200/assets/fonts/Simple-Line-Icons.woff2?v=2.4.0
OTS parsing error: Failed to convert WOFF 2.0 font to SFNT


使用的自定义字体和代码:

@font-face {
  font-family: 'simple-line-icons';
  src: url('../fonts/Simple-Line-Icons.eot?v=2.4.0');
  src: url('../fonts/Simple-Line-Icons.eot?v=2.4.0#iefix') format('embedded-opentype'),
       url('../fonts/Simple-Line-Icons.woff2?v=2.4.0') format('woff2'),
       url('../fonts/Simple-Line-Icons.ttf?v=2.4.0') format('truetype'),
       url('../fonts/Simple-Line-Icons.woff?v=2.4.0') format('woff'),
       url('../fonts/Simple-Line-Icons.svg?v=2.4.0#simple-line-icons') format('svg');
  font-weight: normal;
  font-style: normal;
}

我采用的styleExt为SCSS,stylesheet文件后缀名为.css。

解决方法有2种:

1、将xxxx.css改成xxxx.css.scss。

2、改变字体声明中的format格式。将format('woff')改成format('font-woff')

@font-face {
  font-family: 'simple-line-icons';
  src: url('../fonts/Simple-Line-Icons.eot?v=2.4.0');
  src: url('../fonts/Simple-Line-Icons.eot?v=2.4.0#iefix') format('embedded-opentype'),
       url('../fonts/Simple-Line-Icons.woff2?v=2.4.0') format('font-woff2'),
       url('../fonts/Simple-Line-Icons.ttf?v=2.4.0') format('truetype'),
       url('../fonts/Simple-Line-Icons.woff?v=2.4.0') format('font-woff'),
       url('../fonts/Simple-Line-Icons.svg?v=2.4.0#simple-line-icons') format('svg');
  font-weight: normal;
  font-style: normal;
}

你可能感兴趣的:(CSS Failed to decode downloaded font, OTS parsing error: Failed to convert WOFF 2.0 font to SFNT)