关于gulp5.0引用iconfont报错

179 阅读1分钟

问题描述:本地项目采用gulp5.0以及相关插件,进行静态页面编写,在使用icon时,发现报错,无法显示图标

具体报错信息:

image.png 翻译:无法解码下载的字体;OTS解析错误:WOFF标头中的文件大小不正确;

问题排查思路:

1、检查gulp.js以及配置文件config,发现没有问题,只是单纯的进行文件夹移动 image.png

2、检查css路径问题,发现也没有问题,字体文件存储在fonts文件夹里面的 image.png

3、百度搜索OTS parsing error: incorrect file size in WOFF header,有方式说将字体转译,再放入至项目里,经尝试后,还是不行

4、第三点给了我一个想法,是不是我下载的iconfont有问题,于是我找到了能打开woff、ttf的网址,发现并无问题 image.png


字体文件无问题,引用方式无问题,gulp.js也无问题,那还能是啥造成的?
经过胡乱的摸索,我尝试将字体文件,直接放入编译后的fonts文件夹里,我勒个去,好使了,于是我开始怀疑上了gulp5.0的问题,因为以往项目用的gulp4.0是没有出现过类似问题的。

解决办法:

1、将iconfont字体文件直接放入编译后的文件夹,不通过gulp5.0去复制粘贴它
2、将gulp5.0降至gulp4.0.2,iconfont便好使了