首页 前端知识 【HTML5】浏览器不能显示字体报错Failed to decode downloaded font问题解决

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

2024-04-21 10:04:16 前端知识 前端哥 988 925 我要收藏

把网上的项目中字体通过链接保存下来在本地上使用,在本地服务器上运行站点发现,用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 (字体文件已损坏)

文件大小

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

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

解决问题

发现了问题(出坑 ),重新找个一样的文件(没问题)覆盖就好,

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

图2

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5645.html
评论
发布的文章

CSS(8)空间转换 动画

2024-04-29 12:04:29

CSS介绍(4)--背景属性

2024-04-29 12:04:26

Web学习记录---CSS(1)

2024-04-29 12:04:17

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!