微信小程序使用阿里巴巴iconfont,报错Failed to load font http://at.alicdn.com/t/..........

最新推荐文章于 2023-11-13 11:08:09 发布
最新推荐文章于 2023-11-13 11:08:09 发布
阅读量1.2k 收藏 1
点赞数 1
分类专栏： 微信小程序 文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shivy_/article/details/133860414
版权

介绍

上篇文章，介绍了，在微信小程序里导入并使用阿里巴巴iconfont图标；但是在页面里使用后，可以看到后台日志有打印错误信息，具体报错如下：
在这里插入图片描述

分析

报这个错，是因为项目里使用了 iconfont字体图标，但是这个链接在小程序后台没有备案在后台配置一下白名单即可。具体方式如下：

  1. 点击链接 https://mp.weixin.qq.com/ ，并进行登录，进入到小程序后台，
  2. 点击开发下的 开发管理
    在这里插入图片描述
  3. 选中 开发设置
    在这里插入图片描述
  4. 在服务器域名下，选择 downloadFile合法域名，j进行添加即可，如下所示，这里我加入的是 https://at.alicdn.com
    在这里插入图片描述
发呆的薇薇°
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
10-25
主要介绍了PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法,需要的朋友可以参考下
微信小程序报错-Failed to load font
最新发布
qq_35632957的博客
01-17 565
解决方案：在微信公众平台设置downloadFile合法域名加上https://at.alicdn.com。原因：引用阿里icon。
vue中引用阿里字体图标的方法
11-29
想在vue中引用阿里的iconfont,却出现报错 ，原因是没有对应的loader处理字体文件。 解决办法 1.引入css文件 import 'font-awesome/css/font-awesome.min.css' 2.在webpack.config中配置 { test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file-loader' } 总结 以上所述是小编给大家介绍的vue中引用阿里字体图标的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
小程序使用Vant组件时报错Failed to load font解决方法
snoopy_13579的博客
05-10 8412
小程序引用Vant组件后每次重新编译都会报错 [渲染层网络层错误] Failed to load font https://at.alicdn.com/t/font_2553510_iv4v8nulyz.woff2?t=1649083952952
微信小程序----引入外部字体库iconfont的图标
热门推荐
止于至善
12-22 3万+
直接使用阿里巴巴的网络路径选择iconfont图标 官网：阿里巴巴矢量字体库 步骤：阿里巴巴字体库使用方法 全局引入app.wxss@font-face { font-family: 'iconfont'; /* project id 518032 */ src: url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.eot');
微信小程序 如何引入外部字体库iconfont的图标
11-26
如何引入外部字体库iconfont的图标，具体如下 直接使用阿里巴巴的网络路径 选择iconfont图标 官网：阿里巴巴矢量字体库 步骤：阿里巴巴字体库使用方法 全局引入app.wxss @font-face { font-family: 'iconfont'; /* project id 518032 */ src: url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.eot'); src: url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.eot?#iefix') for
微信小程序 failed to load font
码农桃子的博客
04-15 1551
应该很少有人用到这个东西吧，这个是使用阿里图标库的图标导致的，是后台没有配置白名单。--开发设置–服务器域名–downloadFile合法域名，添加到里面即可。微信小程序控制台提示 Failed to load font。
微信小程序 [渲染层网络层错误] Failed to load font https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf
11-13 5074
开发微信小程序的时候，应该是ui组件使用到了这个字体文件，然后下载的时候报错：[渲染层网络层错误] Failed to load font https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf。
微信小程序 [渲染层网络层错误] failed to load font
dzbfqc的博客
01-30 2万+
微信小程序 Failed to load font
微信小程序iconfont真机渲染失败
weixin_46719229的博客
08-02 1077
【代码】微信小程序iconfont真机渲染失败。
酒店管理系统源码；酒店管理系统，基于 vue.js，使用 vue-cli3 脚手架，引用 Element UI 组件库，方便开发
06-07
酒店管理系统源码；酒店管理系统，基于 vue.js，使用 vue-cli3 脚手架，引用 Element UI 组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色
SevenZipSharp压缩/解压（.7z .zip）
03-30
SevenZipSharp加密压缩/解压示范性Demo，可满足定制开发的需求，支持回调压缩/解压实时进度信息等。内部包含SevenZipSharp.dll、7z.dll、7z64.dll等。
Atom-atom-yii,用于使用yii framework v1的atom包。为igogo5yo/atom做出贡献.zip
09-18
Atom-atom-yii.zip,用于使用yii框架v1的atom包原子逸包,atom是一个用web技术构建的开源文本编辑器。
App.PublishWeb.zip_APP数据库_数据库网站_数据库网站html_静态html
09-20
读取数据库数据并为网站生成静态HTML文件
ali-oss-upload.zip
05-25
阿里云OSS上传，vue结合element-ui上传，支持批量上传，支持上传进度，支持分片上传，支持断点续传...
Vue项目中引入iconfont 图标库 和 图标显示成小方块的问题解决
Jackshijin的博客
10-15 3万+
这两天弄了个vue的小demo ，引入了iconfont 的图标，没想到是噩耗的开始，一直显示的是小方块，一步步排查踩坑把问题解决。 首先看看官方对项目引入iconfont 的介绍。 unicode引用 unicode是字体在网页端最原始的应用方式，特点是： 兼容性最好，支持ie6+，及所有现代浏览器。 支持按字体的方式去动态调整图标大小，颜色等等。 但是因为是字体，所以不支持多色。只...
Failed to load local font resource：微信小程序加载第三方字体
Qing_X_C的博客
07-26 3306
ttf转换为base64格式
小程序iconfont报错_微信小程序引用iconfont图标的方法
weixin_42510446的博客
01-17 815
最近在研究微信小程序，自己写demo的时候想要引用巴里巴巴图标库的图标，于是：@font-face {font-family: 'iconfont';src: url('iconfont.eot');src: url('iconfont.eot?#iefix') format('embedded-opentype'),url('iconfont.woff') format('woff'),url(...
屏蔽当前电脑对某地址的访问
weixin_39150852的博客
11-29 1158
例如屏蔽对https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i.ttf 的访问 1.找到c盘中的hosts文件 2.将该文件拖动至桌面,否则无法修改该文件 3.使用记事本打开,在文件末尾添加以下代码127.0.0.1 at.alicdn.com 4.保存后将该文件放回原处,重新访问该网址 127.0.0.1 at.alicdn.com 即...
https://at.alicdn.com/t/c/font_2282770_14425t4oa60f.woff2?t=1673327595201 这个文件怎么在代码中查看具体的图标
06-09
这个文件是一个字体文件，里面包含了一组字体图标，您可以通过以下步骤在代码中使用它： 1. 在您的Uniapp项目中，找到“static”文件夹。 2. 在“static”文件夹中创建一个名为“iconfont”或类似名称的文件夹。 3. 将您下载的字体文件“font_2282770_14425t4oa60f.woff2”复制到“iconfont”文件夹中。 4. 在您的Vue或Uniapp页面中，可以通过以下方式引入该字体文件： ```css @font-face { font-family: "iconfont"; src: url("@/static/iconfont/font_2282770_14425t4oa60f.woff2") format("woff2"); } ``` 5. 然后，您可以在您的样式中使用“iconfont”字体，并通过Unicode编码来使用其中的图标，例如： ```css .icon { font-family: "iconfont"; font-size: 24px; color: #333; } .icon-arrow-right:before { content: "\e60c"; } ``` 在上面的示例中，“.icon-arrow-right”是您想要使用的图标的类名，"\e60c"是该图标在字体文件中的Unicode编码。 请注意，您需要查找该字体文件中包含的图标的Unicode编码，以便正确地在代码中使用它们。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值