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

最新推荐文章于 2025-01-23 10:51:36 发布

原创最新推荐文章于 2025-01-23 10:51:36 发布 · 1w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #font #SCSS #chrome

本文记录了在Web前端开发过程中遇到的字体加载失败问题及解决方案。主要错误为Chrome浏览器无法解析WOFF2字体，通过更改文件后缀名及字体声明中的format格式解决了该问题。

最近在看一些关于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;
}