把网上的项目中字体通过链接保存下来在本地上使用,在本地服务器上运行站点发现,用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 (字体文件已损坏)
文件大小
其实还有一个方式可以验证文件是否损坏,
通过对比保存下来的文件大小,如大小不一致那就是损坏的文件
解决问题
发现了问题(出坑 ),重新找个一样的文件(没问题)覆盖就好,
写到最后,遇到同样的问题的读者,可以试一下