微信小程序使用iconfont遇到的问题

1.和正常web项目一样,将iconfont用到的所有文件放到自己小程序对应的文件夹里(我是在根目录下新建了static文件夹,用来放项目需要的资源文件,比如图片、字体包)。
2.在app.wxss里引入iconfont.css报错
@import “./static/font/iconfont.css”;
此时问题一出现了:
File not found: ./static/font/iconfont.css
原因:小程序不支持css文件
解决方法:需要将css后缀改成wxss

@import "./static/font/iconfont.wxss";

之后项目里就可以正常使用图标字体里

3.真机预览时,微信中看不到字体图标
发现微信开发者工具里预览打包时报错
字体文件没有被打包上传
在这里插入图片描述
原因:css、ttf、woff、woff2这四个文件不在小程序允许上传的文件类型中。可以参考小程序允许上传的文件类型文档
https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html#%E5%85%81%E8%AE%B8%E4%B8%8A%E4%BC%A0%E7%9A%84%E6%96%87%E4%BB%B6
在这里插入图片描述
解决方案:使用线上地址
(1)既然这些文件无法上传,那只能删除掉,用iconfont提供的线上链接,将iconfont.wxss里的font-face路径换成阿里图标库提供的线上地址,这样就不需要本地文件了
(2)不想使用iconfont提供的地址,也可以将文件上传到自己公司服务器上,将字体包地址换成公司地址在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/u010735316/article/details/119863711