文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

小程序使用Vant组件时报错Failed to load font解决方法

2023-09-03 14:50

关注

小程序引用Vant组件后每次重新编译都会报错

[渲染层网络层错误] Failed to load font https://at.alicdn.com/t/font_2553510_iv4v8nulyz.woff2?t=1649083952952

虽然不影响小程序运行,但看着很难受

按照网上教程所说的request合法域名添加“https://at.alicdn.com”后还是会报错,干脆不用网络请求了,直接下载下来,转换成Base64 encode,本地使用

在项目中找到miniprogram_npm,右击选择在文件夹中查找(注意我使用的时npm方式引入的,其他方式可能文件夹名不一样,根据自己实际情况选择文件夹查找)

输入at.alicdn.com,可以直接定位到这3个URL,报错就是在这里产生的(可以先在编辑器右击,格式化代码)

我们直接把这三个链接复制到浏览器下载下来,分别得到这三个文件

font_2553510_iv4v8nulyz.woff2font_2553510_iv4v8nulyz.wofffont_2553510_iv4v8nulyz.ttf

或者直接下载我下载好的【1】,见文末链接

打开Online @font-face generator — Transfonter,在线字体转base64格式,分别对3个文件进行转换

 

 

得到3个压缩包,如果懒得转换可以直接用我转换好的【2】

分别打开压缩包下的css文件,第一个从src:url.......复制到format('woff2'),注意不要带分号,覆盖粘贴到index.wxss下的原来位置,然后英文逗号,第二个从url.......复制到format('woff'),英文逗号,第三个从url.......复制到format('ttf')

 

 

然后保存index.wxss,清除缓存,重新编译,错误消失

同样的,如果懒得粘贴可以直接用我粘贴好的【3】,覆盖到相应位置,例如我的为

工程目录\miniprogram_npm\@vant\weapp\icon

注意:请谨慎覆盖,覆盖之前建议先备份一份,后续Vant更新版本可能该文件(index.wxss)的其他地方会有变动,建议还是自己操作一遍

链接:https://pan.baidu.com/s/1O8HSWCpZFbA85pdo1ltozg?pwd=1234 
提取码:1234

来源地址:https://blog.csdn.net/snoopy_13579/article/details/130595417

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯