微信小程序iconfont真机渲染失败

这篇具有很好参考价值的文章主要介绍了微信小程序iconfont真机渲染失败。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

解决方法:

1.将下载的.woff文件在transfonter转为base64,
2.打开网站,导入文件,开启base64按钮,下载转换后的文件

微信小程序iconfont真机渲染失败,微信小程序,微信小程序,小程序文章来源地址https://www.toymoban.com/news/detail-635240.html

3. 在下载解压后的文件夹中找到stylesheet.css,并复制其中的base64
4. 修改index.wxss文件,将url中的本地地址替换为base64
@font-face {
	font-family: "iconfont";
	src: url('本地地址') format('woff'),
}

到了这里,关于微信小程序iconfont真机渲染失败的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序真机https请求失败?报错 “errno“:600001,“errMsg“:“request:fail -200:net::ERR_CERT_COMMON_NAME_INVALID

    目录 1.检查小程序后台有没有配置 2.注意事项 3.证书要求 4.服务端若使用新证书没有成功,可尝试不检验客户端证书 1.检查小程序后台有没有配置 打开微信小程序,开发管理-服务器域名  2.注意事项: 域名只支持  https  (wx.request、wx.uploadFile、wx.downloadFile) 和  wss  (wx.conne

    2024年02月02日
    浏览(49)
  • 微信小程序使用iconfont图标

    一、第一步进入iconfont网站 1.添加需要使用的图标,点击购物车图标加入项目   2.点击右上角的购物车按钮    3.点击添加项目按钮,选择一个项目添加即可,若没有项目,可以创建   4.添加完项目会自动跳转到下一个页面,点击font class 生成在线链接   5.复制生成的链接,去

    2024年02月08日
    浏览(71)
  • 微信小程序如何引入Iconfont

    在小程序中引入 Iconfont 可以通过以下步骤进行操作: 打开 Iconfont 网站(https://www.iconfont.cn/)并登录账号,创建一个项目并添加所需的图标到项目中。 在项目中选中需要使用的图标,点击右上角的 “下载代码” 按钮。 下载生成的项目包,解压后可以看到一个名为 `iconfont.

    2024年02月14日
    浏览(68)
  • 在微信小程序中如何引入iconfont

    略 iconfont 指 https://www.iconfont.cn/。 通过 iconfont 可组建自己的图标库。 注册帐号 创建项目 添加图标 Font Family:默认为iconfont。当项目中已有iconfont名称的字体时,需要使用不同的名字。 略 将 iconfont.css 重命名为 iconfont20231007.wxss 将 iconfont20231007.wxss 文件复制到小程序的font目录

    2024年02月03日
    浏览(79)
  • 微信小程序引入外部的CSS或iconfont

    使用外部样式的方法是: @import \\\'相对路径下的外部样式文件.wxss\\\'; iconfont作为一种特殊的CSS也逃不开这个命运,小程序的wxss文件font-face中的url不接受HTTP地址参数,但是接受base64,因此而我们可以将字体文件下载后转化为base64. 方案如下: 1、到阿里巴巴矢量图标库(iconfont-阿里

    2024年02月04日
    浏览(45)
  • 微信小程序开发系列(十三)·如何使用iconfont、微信小程序中如何使用字体图标

    目录 1.  如何使用iconfont 2.  微信小程序中如何使用字体图标 3.  背景图的使用         在项目中使用到的小图标,一般由公司设计师进行设计,设计好以后上传到阿里巴巴矢量图标库,然后方便程序员来进行使用。         小程序中的字体图标使用方式与 Web 开发中

    2024年03月20日
    浏览(79)
  • 微信小程序真机调试

    以下方法基于:windows系统 开启开发者模式 设置——系统——关于手机——点击版本号 开启开发者模式 小米点击7次 USB调试开启 设置——系统——开发人员选项——USB调试开启 注意如果有允许usb 安装应用,需要开启 用数据线把手机和电脑连起来 Hbuilder下载真机调试插件 工

    2024年02月12日
    浏览(56)
  • 微信小程序真机调试问题

    error occurs:ENOENT: no such file or directory, access ‘/storage/emulated/0/Android/data/com.tencent.mm/MicroMsg/wxanewfiles/7aa4b87a5745cb4ba620783bdc762db2/miniprogramLog/log2’ 解决: 换为真机1.0 版。 解决 : 1,勾选不校验合法域名。 2,开启手机自身的开发者模式。 每种手机如何开启,具体百度。 3,将小程

    2024年02月13日
    浏览(46)
  • 微信小程序安卓真机调试报错

    ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️           报错基于黑马程序员苍穹外卖项目     1 .VM75:398 error occurs:no such file or directory, open \\\'wxfile://usr....   2.VM75:398 error occurs:no such file or directory, open \\\'wxfile://ad....(博主暂未解决,不过经过猜测,这是一个关于广告

    2024年04月28日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包