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