Failed to decode downloaded font(线上环境字体图标不显示)

网上解决办法:

1.问题:maven项目使用Bootstrap时,出现 "Failed to decode downloaded font"和"OTS parsing error: Failed to convert WOFF 2.0 font to SFNT"导致图标出不来的问题。

2.原因:上面的xml里也写了,因为经过maven的filter,会破坏font文件的二进制文件格式,到时前台解析出错。

3.解决方案:设置filter,font文件不需要filter

原文:https://blog.youkuaiyun.com/xinqilela/article/details/79664591 

 

我的解决:

看着这个分析,判断自己项目。在测试环境项目运行正常,,这两个文件在浏览器 Application中查看样式等显示正常,在正式环境,项目运行不正常,这俩文件均显示一串字符。自己项目没有用maven,也照葫芦画瓢,在filter中设置不对其进行过滤,在web.xml中做如下设置

项目重新启动,图标正常显示
 

<think>好的,我需要解决用户遇到的字体文件解码失败的问题,特别是涉及WOFF、TTF、Themify和fa-solid-900字体的情况。首先,我得根据用户提供的引用信息,整理出可能的原因和解决方案。 首先,用户提到了多个引用,其中引用[1]、[2]、[3]、[5]都涉及字体文件无法解码的问题,可能的原因包括服务器配置、Maven过滤、字体格式问题等。比如引用[1]和[5]提到在Maven中添加过滤器来解决,这可能是因为资源文件被错误处理导致字体损坏。引用[2]和[3]则涉及前端框架如Vue和React,可能需要检查字体路径和格式是否正确。 接下来,我需要系统地列出常见原因,并对应给出解决方案。常见的步骤可能包括检查Maven过滤设置、配置Web服务器、验证字体路径、检查字体格式、清除缓存等。另外,用户提到使用Themify和Font Awesome的fa-solid-900字体,可能需要特别检查这些字体的引入方式是否正确。 需要注意的是,同框架可能有同的配置方式,比如Vue需要检查public目录和路径配置,而React可能需要配置Webpack。同时,确保字体文件的MIME类型正确,比如Apache或Nginx的配置中添加正确的类型。此外,字体文件自身损坏的可能性也能忽视,需要用户验证文件完整性。 最后,要确保解决方案结构清晰,分步骤说明,让用户能够逐步排查和解决问题。同时,根据用户提供的引用信息,适当添加引用标注,增强可信度。</think>以下是为您整理的字体文件解码失败问题解决方案,按步骤分析常见原因及对应处理方法: ### 一、常见原因分析 1. **Maven资源过滤导致字体损坏** 当使用Java Web项目时,Maven默认会对资源文件进行过滤处理,导致二进制字体文件被篡改[^1][^5]。 2. **字体文件路径错误或格式支持** 前端框架(如Vue/React)中路径配置错误,或未正确声明字体格式(如woff/ttf)[^2][^3]。 3. **服务器未正确配置MIME类型** 未在Web服务器(如Nginx/Apache)中设置字体文件的MIME类型,导致浏览器无法识别[^5]。 4. **字体文件本身损坏** 下载或传输过程中文件损坏,或设计提供的字体文件存在兼容性问题[^3]。 --- ### 二、分步解决方案 #### 步骤1:检查Maven资源过滤配置 在`pom.xml`中添加以下配置,禁止对字体文件进行过滤处理: ```xml <build> <resources> <resource> <directory>src/main/resources</directory> <filtering>true</filtering> <excludes> <exclude>**/*.ttf</exclude> <exclude>**/*.woff</exclude> <exclude>**/*.woff2</exclude> </excludes> </resource> <resource> <directory>src/main/resources</directory> <filtering>false</filtering> <includes> <include>**/*.ttf</include> <include>**/*.woff</include> </includes> </resource> </resources> </build> ``` 修改后执行`mvn clean install`重新构建项目[^5]。 #### 步骤2:配置Web服务器MIME类型 *Apache配置示例*: ```apacheconf AddType application/font-woff .woff AddType application/font-woff2 .woff2 AddType application/x-font-ttf .ttf ``` *Nginx配置示例*: ```nginx location ~ \.(ttf|woff|woff2)$ { add_header Access-Control-Allow-Origin *; types { application/font-woff woff; application/font-woff2 woff2; application/x-font-ttf ttf; } } ``` #### 步骤3:前端框架路径修正 以Vue项目为例,字体文件应放在`public/fonts/`目录,CSS中声明方式: ```css @font-face { font-family: 'Themify'; src: url('/fonts/themify.ttf') format('truetype'), url('/fonts/themify.woff') format('woff'); } ``` #### 步骤4:验证字体文件完整性 使用工具检测字体文件: ```bash file themify.ttf # 应显示"TrueType font data" fc-validate themify.ttf # 使用FontForge工具验证 ``` #### 步骤5:清除浏览器缓存 强制刷新页面(Ctrl+F5),或使用无痕模式测试。 --- ### 三、特殊字体处理建议 1. **Font Awesome fa-solid-900** 建议通过npm安装官方包: ```bash npm install @fortawesome/free-solid-svg-icons ``` 在入口文件中引入: ```javascript import { library } from '@fortawesome/fontawesome-svg-core' import { faUser } from '@fortawesome/free-solid-svg-icons' library.add(faUser) ``` 2. **Themify字体兼容性** 建议提供多种格式字体文件: ```css @font-face { font-family: 'Themify'; src: url('themify.eot'); /* IE9 */ src: url('themify.eot?#iefix') format('embedded-opentype'), url('themify.woff2') format('woff2'), url('themify.woff') format('woff'), url('themify.ttf') format('truetype'); } ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值