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

最新推荐文章于 2022-12-14 09:56:48 发布
最新推荐文章于 2022-12-14 09:56:48 发布
阅读量3.3k 收藏 6
点赞数 4
文章标签： css js 乱码 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45319402/article/details/117259336
版权

下图是从iconfont下载的项目文件目录在这里插入图片描述

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

在这里插入图片描述
导致不显示图标

在这里插入图片描述
控制台警告decode失败！！！

下面是解决方案：

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

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

在这里插入图片描述
css片段：
在这里插入图片描述

最终效果：

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

小周同志爱学习
关注
element打包部署出现iconfont图标乱码
希望我快乐
07-20 3434
element图标打包乱码
VUE Element-ui 图标加载失败问题 Failed to decode downloaded font : woff ttf
weixin_42061364的博客
05-25 4316
最近重新搭建一个vue+element-ui的项目，使用的时候出现这么个问题，element的样式引用正常，但是图标显示是一个小方块 报错信息如下： 在网上找了很多解决办法，普遍方法都是修改assetsPublicPath等等，我们首先看下： ## 1.路径问题，设置assetsPublicPath vue-cli项目中 config文件下的index.js assetsPublicPath属性 默认为 ‘/’ 修改为 assetsPublicPath:’./’ 修改后配置如下 ## 2.styl
明明已经正确引入了iconfont.woff2文件，为什么浏览器还会报Failed to decode downloaded font？
宋承佑
06-21 2004
问题背景 在开发网站的时候，难免会用到iconfont图标库文件，但是会出现，Failed to decode downloaded font这种错误。这里特指的是没有使用打包工具等方式的引入，这里我遇到的就是普通的引入方式。 上图的这个报错，我原先使用的是官方默认给的引入方式，后来将iconfont.woff2装成了base64的格式，打开依然是报这个错误。 解决方法 直接去iconfont官网去生成对应的在线地址。就可以解决以上问题了。 ...
iconfont字体图标线上环境加载偶尔乱码问题
weixin_43389274的博客
11-09 2068
最近碰到了一个问题，线上环境项目偶尔会出现字体图标乱码的问题，百度了一波，解决如下： 项目打包原因 1.element ui中项目打包使用的是node-sass 2.本地sass文件中的package.json文件里是 dart-sass， 使用node-sass打包生成的字体图标文件 3.卸载sass,重装node-sass,node-sass安装因为网络环境的问题可能会失败，可以使用淘宝镜像。 使用dart-sass打包后生成的字体图标文件 4.至此，乱码问题就完美解决了。 5.还有一个小插曲，换
iconfont 字体图标错乱
冷月心的博客
07-13 2437
iconfont 字体图标错乱
element-ui iconfont乱码问题处理
ringlot的博客
01-19 6842
一、问题 使用element-UI的项目，打包部署以后，偶尔会出现iconfont显示乱码，但是刷新后又会好。研究后，查看打包后的css,图标字体的content经过scss编译以后变成了这样 不过正常情况下图标还是会显示的，但是偶尔进入页面后，所有的iconfont图标会变成乱码。 二、原因 1、主要原因是sass 编译问题，针对iconfont 编译后会乱码， 2、项目中引用e...
spring使用iconfont出现乱码
qq_56180999的博客
12-10 180
转载自：泽泽生龙 https://www.cnblogs.com/chenlongsheng/p/11121136.html
浏览器显示Failed to decode downloaded font问题解决方案
热门推荐
weixin_44173639的博客
12-16 1万+
最近做一个spring boot项目时，网站有的图标显示的是小方格的形式 例如这样： 然后百度了半天，以下有四种解决方法： 第一：如果是在谷歌或者火狐浏览器出现的话，换成ie浏览器就可以显示了。（我的就是这种！！！） 如果你是那种刨根问底的性格，非要使用谷歌或者火狐，可以在服务器设置一下自己定义MIME类型。（具体自行百度）。 第二：检查是否使用maven，如果是，由于maven的filter（拦截），会破坏font文件的二进制文件格式，导致前台解析出错， 所以可以添加以下代码，到pom文件的标签下的标签
Failed to decode downloaded font 浏览器异常警告解决
往南的博客
09-22 2367
问题：在将之前写好的静态 HTML 页面引入到 SpringBoot 中，静态资源中带有 font 字体图标， 引入后图标不能正常显示，且浏览器出现Failed to decode downloaded font警告； 原因：触发这种情景的原因是因为项目使用了Maven管理，想要修复它只需在pom文件中添加 <filtering>false</filtering> 完整配置： <resources> <resource> ..
Vue elementui字体图标显示问题解决方案
11-19
当字体图标无法正常显示时，通常会看到一个空白的方框或者错误提示，如“Failed to decode downloaded font”。 首先，问题出现在`build/utils.js`文件中的CSS加载器配置。在这个场景中，开发者尝试通过添加`public...
出现Error: Post “https://localhost:7053/participation/v1/channels“: read tcp 127.0.0.1:44780-＞127.0.0.
weixin_42375493的博客
06-06 1万+
创建channel时 出现错误 解决方法 1.切换到：/go/src/github.com/hyperledger/fabric/scripts$目录下 2.然后切换到：/go/src/github.com/hyperledger/fabric/scripts/fabric-samples/test-network$ 输入： 3.最后重新进行一下之前的过程 注意：一定要有sudo,否者容易出现的错误...
字体图标出现乱码的兼容方案
weixin_34378969的博客
07-13 1297
/* 只需在iOS4.3+/Android2.2+上运行的网页 */ @font-face { font-family: "iconfont"; src: url("iconfont.ttf") format("truetype"); } /* 需兼容各浏览器的网页。注意: 最后的svg没有指定format */ @font-face { font-family: "iconfon...
Failed to decode downloaded font: ＜URL＞ 图标无法显示
yu57955的博客
03-07 438
百度了一下，都是说springboot项目对字体文件过滤导致字体破坏，通过改pom.xml即可解决，最终验证和这个没关系 换思路 这个项目文件是上个项目通过IDEA复制过来的，可能IDEA将文件处理过，导致文件损坏 解决方法： 用Windows自带的资源管理器复制过来替换掉有问题的文件，问题解决，简单粗暴 ...
vue-element打包iconfont图标乱码
qq_51538602的博客
12-14 339
在 build文件夹里面的 utils.js 文件中加上publicPath:"../../"
layui页面图标不显示，报错信息：Failed to decode downloaded font .....
CharlesMo1996的博客
06-09 1034
解决办法 在 pom.xml中添加如下信息即可解决 <build> <resources> <resource> <directory>src/main/resources</directory> <filtering>true</filtering> <excludes>
webpack打包字体文件后无法加载，显示failed to decode downloaded font
weixin_44471622的博客
05-19 1289
项目场景： 使用webpack打包字体文件，例如iconfont.svg、iconfont.eot、iconfont.ttf等。 问题描述 webpack打包字体文件后无法加载，显示failed to decode downloaded font。 webpack打包字体文件之后，字体图标不展示，显示一个小框，检查之后确认字体图标的样式已经设置上，但就是没有展示，打开控制台，展示如下图所示的报错。 使用file-loader和ur-loader都无法实现 { test:/\.(svg|eot|
vue项目打包发布后线上出现icon乱码
juvenile_Li的博客
10-12 1993
打包发布到线上，页面偶发性出现图标乱码问题，再次刷新页面后，又可正常显示
iconfont的一次踩坑记录：图标显示异常
cxy853480896的博客
04-23 2445
iconfont的一次踩坑记录项目场景问题描述原因分析：解决方案： 项目场景 公司某系统项目使用iconfont，图标显示异常 问题描述 UI创建提供iconfont库，前端引入并使用后发现显示的图标并非库中图标。 @font-face { font-family: ''; /* project id 2496030 */ src: url('XXXXXXXX'); src: url('XXXXXXXX') format('XXXXXXXX'), url('//at.alicdn.co
:8080/#/:1 Failed to decode downloaded font: http://localhost:8080/satic/font/iconfont.ttf
最新发布
09-09
根据引用内容和，这个提示信息"Failed to decode downloaded font: http://localhost:8080/static/font/iconfont.ttf"可能是由于字体文件加载不成功引起的。根据中提到的解决方案，你可以尝试在Maven项目中添加一个过滤器来解决这个问题。具体的步骤如下： 1. 打开项目的pom.xml文件。 2. 在<build>标签内添加如下代码： ``` <resources> <!-- fonts file cannot use filter as the data structure of byte file will be changed via filter --> <resource> <directory>src/main/resources</directory> <filtering>true</filtering> <excludes> <exclude>static/font/**</exclude> </excludes> </resource> <resource> <directory>src/main/resources</directory> <filtering>false</filtering> <includes> <include>static/font/**</include> </includes> </resource> </resources> ``` 3. 保存并关闭pom.xml文件。 4. 在IDEA编辑器中，找到Maven侧边栏，右键点击项目名称，选择"Reload Project"或者"Refresh"选项，以重新加载文件。 5. 重新启动你的服务。 这样做的目的是通过过滤器来处理字体文件，确保字体文件的数据结构不会因过滤而改变。同时，你还需要确保在<include>节点中写入字体文件的实际路径，例如"static/font/iconfont.ttf"。如果你按照以上步骤进行操作，重新启动服务后，这个问题应该就可以解决了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值