微信小程序:引入外部中文字体 最简单

本人最近在做学校的暑期社会实践微信小程序项目,今天在改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哟!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。