springboot : Failed to decode downloaded font 和 OTS parsing error

大家好,我是烤鸭:

采坑实录,看了很多人跟我有类似问题,但是都没解决我的问题:

Failed to decode downloaded font 和 OTS parsing error:

尝试了把woff文件移动到其他可以加载的静态资源文件夹下,还是无法加载。

浏览器打开访问直接跳转到登录页。猜测是字体的静态资源被拦截。

 

解答参考这个:

https://stackoverflow.com/questions/34037051/spring-boot-font-awesome-ots-parsing-error-failed-to-convert

pom上加 <exclude> 和 <include>

如图

pom上加 <nonFilteredFileExtensions>

如图


 

如果上面的方法都解决不了你的问题的话!!!

去看看项目里边用没用shiro。加上了woff的过滤,好了。

@Bean(name="shiroFilter")
    public ShiroFilterFactoryBean shiroFilter(@Qualifier("securityManager") SecurityManager manager) {
        ShiroFilterFactoryBean bean=new ShiroFilterFactoryBean();
        bean.setSecurityManager(manager);
        //配置登录的url和登录成功的url
        bean.setLoginUrl("/login.html");
        bean.setSuccessUrl("/index.html");
        //配置访问权限
        LinkedHashMap<String, String> filterChainDefinitionMap=new LinkedHashMap<>();
        //anon表示可以匿名访问  authc表示需要认证才可以访问
        filterChainDefinitionMap.put("/sys/login", "anon");
        filterChainDefinitionMap.put("/**/*.mp4", "anon");
        filterChainDefinitionMap.put("/**/*.css", "anon");
        filterChainDefinitionMap.put("/**/*.js", "anon");
        filterChainDefinitionMap.put("/**/login.html", "anon");
        filterChainDefinitionMap.put("/**/fonts/**", "anon");
        filterChainDefinitionMap.put("/**/*.woff", "anon");
        filterChainDefinitionMap.put("/**/plugins/**", "anon");
        filterChainDefinitionMap.put("/swagger/**", "anon");
        filterChainDefinitionMap.put("/favicon.ico", "anon");
        filterChainDefinitionMap.put("/captcha.jpg", "anon");
        filterChainDefinitionMap.put("/", "anon");
        filterChainDefinitionMap.put("/**", "authc");
        bean.setFilterChainDefinitionMap(filterChainDefinitionMap);
        return bean;
    }

最后:

虽然一开始判断的对了,但是把shiro这个忘记了,自己导致后来加了过滤器和拦截器

配置放行静态资源,都无效,就有点着急了。记录一下,如果有类似的朋友,省点时间,干点啥不好。

 

 

你遇到的错误信息: ``` Failed to decode downloaded font: data:font/woff2;base64,... ``` 表明浏览器在尝试加载一个通过 **Base64 编码内嵌** 的 `woff2` 字体文件时失败了。这类问题通常出现在使用自定义字体(如 `@font-face`)并将字体以 Data URL 形式直接嵌入 CSS 或 HTML 中时。 --- ### 🔍 错误原因分析 1. **Base64 数据损坏或不完整** - 内嵌的 Base64 字符串可能被截断、编码错误、包含非法字符。 - 比如复制粘贴过程中丢失部分内容,或者生成工具出错。 2. **MIME 类型不正确** - 虽然写的是 `data:font/woff2;base64,...`,但实际数据可能是 `ttf`, `otf` 等其他格式,导致解码失败。 3. **过长的 Base64 数据引发解析问题** - 浏览器对 Data URL 长度有一定限制(虽然现代浏览器支持很长),但如果处理不当仍可能导致解析失败。 4. **未正确设置 `@font-face` 规则** - 比如缺少 `format('woff2')` 提示,或语法错误。 5. **缓存或构建工具问题** - 构建工具(如 Webpack、Vite)处理字体资源时配置不当,导致输出的 Base64 出错。 --- ### ✅ 解决方案与修复方法 #### ✅ 方法一:验证并修复 Base64 字符串 确保你的 Base64 是完整的、合法的,并且确实是 WOFF2 格式。 ```css @font-face { font-family: 'MyCustomFont'; src: url('data:font/woff2;base64,d09GMgABAAAAAA...ABCDE==') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; /* 推荐使用 swap 避免 FOIT */ } ``` > ⚠️ 注意: > - `d09GMgAB...` 开头是典型的 WOFF2 文件 Base64 前缀。 > - 如果开头是 `UEsDBBQ=`(即 PK 开头 ZIP 结构),那是 TTF/OTF 包装,不是 WOFF2。 > - 使用在线工具 [https://www.base64decode.org/](https://www.base64decode.org/) 可测试是否能正常解码为二进制文件。 🔧 **建议操作步骤:** 1. 将 Base64 字符串提取出来。 2. 用 base64 解码工具还原成 `.woff2` 文件。 3. 用字体查看器(如 FontForge 或在线工具)打开该文件,确认其有效性。 4. 若无效,则重新导出正确的 woff2 字体并重新编码。 --- #### ✅ 方法二:改用外部字体文件(推荐) 避免将大字体嵌入 Base64,改为外部引用更可靠、性能更好。 ```html <!-- index.html --> <link rel="preload" href="fonts/myfont.woff2" as="font" type="font/woff2" crossorigin> ``` ```css /* style.css */ @font-face { font-family: 'MyCustomFont'; src: url('/fonts/myfont.woff2') format('woff2'), url('/fonts/myfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } ``` ✅ 优点: - 更易调试(可直接访问 `/fonts/myfont.woff2` 查看是否 404) - 减少 HTML/CSS 体积 - 支持缓存 - 不会出现 “decode failed” 问题 --- #### ✅ 方法三:使用 Webpack/Vite 正确打包字体 如果你使用构建工具,请不要手动拼接 Base64,让工具自动处理。 例如在 Vite 中: ```js // vite.config.js export default { assetsInclude: ['**/*.woff', '**/*.woff2'] } ``` 然后在 CSS 中相对引用即可: ```css @font-face { font-family: 'MyFont'; src: url('./assets/fonts/inter.woff2') format('woff2'); } ``` Vite 会自动决定是否转为 Base64(根据大小阈值)或输出单独文件。 --- #### ✅ 方法四:检查服务器 MIME 类型(针对远程字体) 如果字体是从服务器加载而非内联,需确保返回正确的 `Content-Type`: ```http Content-Type: font/woff2 ``` Nginx 示例配置: ```nginx location ~* \.(woff2|woff)$ { add_header Access-Control-Allow-Origin "*"; add_header Content-Type font/woff2; expires 1y; access_log off; tcp_nodelay off; tcp_nopush on; } ``` --- ### 🛠 工具推荐 | 工具 | 用途 | |------|------| | [Transfonter](https://transfonter.org/) | 将 TTF/OTF 转换为 WOFF2 并生成 @font-face CSS | | [Font Squirrel Generator](https://www.fontsquirrel.com/tools/webfont-generator) | 专业级字体转换 | | Chrome DevTools Network Tab | 查看字体请求状态响应内容 | --- ### 💡 总结 你现在看到的 “Failed to decode downloaded font” 错误,根本原因是 **浏览器无法从 Base64 数据中恢复出有效的字体文件**。最常见问题是: - Base64 数据本身损坏 - 实际格式与声明不符(比如用了 TTF 的 Base64 却标成 woff2) - 过大的内联数据影响了解析 ✅ **最佳实践建议:** 1. 使用正规工具生成 WOFF2 字体; 2. 使用外链方式引入字体(配合 preload); 3. 避免手动维护长 Base64 字符串; 4. 添加 `font-display: swap` 提升用户体验; 5. 检查网络面板中的字体请求是否成功。 ---
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

烤鸭的世界我们不懂

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值