本人最近在做学校的暑期社会实践微信小程序项目,今天在改index页面的时候觉得默认的中文字体不太好看,就想换个字体。没想到微信小程序引入外部字体还挺复杂,断断续续搞了一天终于搞好了。
⚠️此办法需要使用github pages
同样可以用的办法:转为base64(适用于英文字体,中文转了之后会特别大,超出微信小程序2M大小的限制)
具体操作可以看这篇文章:https://blog.csdn.net/u013451157/article/details/79825740
------------------------------------------------------------------------------------------------------------
下面分享我的操作:
首先这里是微信小程序提供的官方文件,大家可以在微信开发者工具里面看一下各个文件:https://developers.weixin.qq.com/miniprogram/dev/api/ui/font/wx.loadFontFace.html
步骤1:把字体文件放到github pages的github仓库的根目录下,add commit push一波然后耐心等待一会儿(等网站更新一下)
放到根目录下
步骤二:然后在微信开发者工具里面添加这些代码(来自于微信官方文档)
假设你需要修改的页面是index页面
index.js:
index.js中添加这些代码
这里的url改成自己的github pages的网址 + / + 你的字体文件名
index.wxss:
index.wxss中添加这个
index.wxml:
index.wxml需要用字体的地方class后加上这个
改完这三个文件,保存预览就可以了。
有的时候在电脑上字体不会有变化但是手机上预览就会有变化啦
效果图:
引入前在电脑上
引入外部字体成功!在手机上显示
我是乔尔Joe~喜欢的话点个赞👍点赞的人都能在2020暴富不写bug哟!