浏览器警告Failed to decode downloaded font 系统页面字体图标加载不出来(线上环境字体图标不显示)

 #Failed to decode downloaded font

当我们发现页面有些字体图标不显示,或者显示错误时,浏览器就会报上述错误。

这时候解决方法有三点(三步):

第一:检查是否使用maven,如果是,由于maven的filter(拦截),会破坏font文件的二进制文件格式,导致前台解析出错,

所以可以添加以下代码,到pom文件的<project>标签下的<build>标签里面。

<resources>
    <resource>
        <directory>src/main/resources</directory>
        <filtering>true</filtering>
        <excludes>
             <exclude>static/**/*.woff</exclude>
             <exclude>static/**/*.woff2</exclude>
             <exclude>static/**/*.ttf</exclude>
        </excludes>
     </resource>
     <resource>
         <directory>src/main/resources</directory>
         <filtering>false</filtering>
         <includes>
              <include>static/**/*.woff</include>
              <include>static/**/*.woff2</include>
              <include>static/**/*.ttf</include>
         </includes>
     </resource>
</resources>

如果运行成功,无需下面两步,否则往下看:

第二:也可能是由于使用了security或者shiro等安全框架,导致静态资源被拦截,这时候可以放行静态资源(这个网上有很多方法,绝对路径放行或者全部放行,你可以根据你的项目具体操作,应该相信不难)。第二步完成之后,大部分项目是可以正常显示了,但如果还有问题,请继续往下看:

第三:到这里,就是巨坑了,同学。是你迁移项目或者下载的时候,前端框架静态资源font文件夹下面的.woff或者.ttf文件损坏了 .woff或者.ttf文件损坏了  .woff或者.ttf文件损坏了 重要的事情说三遍。这时候怎么解决呢?首先如果你有很多静态资源文件,不知道那个错了,不要紧,到浏览器看报错信息,一般都能看到报错的路径。最后你只要去用到的前端框架,重新下载文档,找到font文件夹,替换你项目的这些字体文件(以.woff或者.ttf结尾的文件),建议你换掉整个font文件夹。

 检查这三步都没有问题,相信你的项目显示应该正常了,我也是在第三步搞了许久,没想到是文件损坏,好几天后才发现(有时候不一定是你错了,但是相信你寻找解决方法的过程,是你技术提高最快的过程),所以特地记录下来,希望对你有所帮助。

 

  • 23
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值