【HTML5】浏览器不能显示字体报错Failed to decode downloaded font问题解决

把网上的项目中字体通过链接保存下来在本地上使用，在本地服务器上运行站点发现，用Chrome浏览器访问的时候，出现错误提示不能正常显示字体，怎么解决呢，看看怎么搞。

发现问题

提示警告

打开Chrome浏览器的开发工具，在Console面板下，显示⚠提示，如下图

报错内容Failed to decode downloaded font: ...这是什么意思呢，

提示错误

如果是火狐浏览器的话，在Console面板下，报错提示会是另一个样，如下图

报错内容downloadable font: rejected by sanitizer (font-family: "element-icons" style:normal weight:400 stretch:100 src index:1) source:...这又是什么意思呢，

看链接地址是没有问题的，经过验证，发现字体文件是损坏的，

字体检查

之前在Chrome浏览器里面看着能预览字体，如下图

看着是正常的，就没有怀疑过文件是损坏的（Chrome浏览器会尽一切可能预览字体） =.=

打开文件

用这个transfonter在线转换工具的Webfont generator字体功能，

就可以发现，如下图所示

提示Font file is corrupted （字体文件已损坏）

文件大小

其实还有一个方式可以验证文件是否损坏，

通过对比保存下来的文件大小，如大小不一致那就是损坏的文件

解决问题

发现了问题（出坑 ），重新找个一样的文件（没问题）覆盖就好，

写到最后，遇到同样的问题的读者，可以试一下