iconfont乱码 前端图标乱码解决方案 Failed to decode downloaded font: http://localhost:3000/iconfont.woff

下图是从iconfont下载的项目文件目录iconfont乱码 前端图标乱码解决方案 Failed to decode downloaded font: http://localhost:3000/iconfont.woff_第1张图片

下图是微调后主要的项目CSS代码

iconfont乱码 前端图标乱码解决方案 Failed to decode downloaded font: http://localhost:3000/iconfont.woff_第2张图片
导致不显示图标

iconfont乱码 前端图标乱码解决方案 Failed to decode downloaded font: http://localhost:3000/iconfont.woff_第3张图片
控制台警告decode失败!!!

下面是解决方案:

iconfont.cn官网 前往并打开 ‘ 资源管理 ’ - ‘ 我的项目 ’ - ’ 更多操作 ’ - ’ 编辑项目 ’

然后按照我下面的字体格式选项勾选之后,再次下载,这次的压缩包会包含base64编码和 .EOT文件
(实测若只勾选Base64编码也可以解决乱码问题,但是为了更好的兼容性,推荐仍选择EOT)

iconfont乱码 前端图标乱码解决方案 Failed to decode downloaded font: http://localhost:3000/iconfont.woff_第4张图片
css片段:
iconfont乱码 前端图标乱码解决方案 Failed to decode downloaded font: http://localhost:3000/iconfont.woff_第5张图片

最终效果:

在这里插入图片描述
问题完美解决!!!

你可能感兴趣的:(css,js,乱码,前端,javascript)