微信小程序 [渲染层网络层错误] Failed to load font https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf

错误复现

开发微信小程序的时候,应该是ui组件使用到了这个字体文件,然后下载的时候报错:

[渲染层网络层错误] Failed to load font https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf
net::ERR_CACHE_MISS 
(env: Windows,mp,1.06.2310071; lib: 3.1.5)

报错原因

我使用了阿里的iconfont字体图标,该url在我的小程序后台未添加到request允许域名列表中,所以导致请求无法访问到。

解决办法

在小程序后台设置里面,将 https://at.alicdn.com 添加到允许的域名列表中:

然后在小程序的开发工具里面清除一下缓存:

并且重新刷新一下域名配置列表:

最后重新编译一下小程序,重启就可以了:

### UniApp NVUE 页面使用外网字体图标 #### 可行性分析 在UniApp NVUE页面中使用来自外部网络的字体图标存在一定的可行性和局限性。当尝试加载位于`https://at.alicdn.com/t/font_11111111_o4be5m29hdm.ttf`这样的URL上的字体文件时,如果遇到类似于`net::ERR_CACHE_MISS`的错误提示,则表明可能存在跨域资源共享(CORS)问题或是该域名未被配置为合法请求源[^1]。 对于局域网环境下测试或部署的应用来说,要使NVUE页面能够成功加载并显示这些外网字体图标,需确保目标服务器支持CORS,并且所使用的具体路径已被加入至小程序的安全域名白名单内[^2]。这意味着开发者必须登录到对应的小程序平台(如微信小程序),在其管理界面指定可信任的第三方资源提供者网址,从而允许应用向其发起HTTP(S)请求获取所需数据。 此外,考虑到性能优化方面的需求以及减少对外部依赖的风险,建议考虑将必要的字体文件本地化处理——即下载后放置于项目的静态资源目录下供离线调用;或者启用Base64编码方式嵌入CSS样式表之中来规避潜在的网络连接不稳定带来的影响[^3]。 #### 实际操作指南 为了验证上述方法的有效性,可以按照如下方式进行实验: 1. **检查安全域名设置** - 登录微信小程序后台; - 导航至“开发”-> “开发管理” -> “服务器域名”,确认已添加`https://at.alicdn.com`作为合法的download域名[^4]。 2. **调整iconfont配置** - 访问[IconFont](http://www.iconfont.cn/)网站,进入个人中心下的项目列表页; - 对应的目标字体库执行更新操作,勾选“Base64”选项以生成新的CSS代码片段。 3. **修改项目代码** ```javascript // 在app.json或其他全局配置文件里声明自定义字体家族名称 { "style": { "base": "@/static/style/base.wxss" } } ``` ```css /* 定义@font-face规则 */ @font-face { font-family: 'myCustomIcons'; src: url('data:application/x-font-ttf;charset=utf-8;base64,...') format('truetype'); /* 使用Base64编码后的字符串代替实际链接 */ } /* 应用于特定元素 */ .custom-icon-class { font-family: 'myCustomIcons', sans-serif; } ``` 通过以上步骤可以在一定程度上提高NVUE页面在外网字体图标方面的兼容性和稳定性。
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

1024小神

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

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

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

打赏作者

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

抵扣说明:

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

余额充值