使用外部字体

南楼画角 提交于 2020-02-09 10:18:24

微信小程序中使用漂亮的字体:

主要有以下几种方法:
1.将需要的字体转换成base64格式的css文件,像阿里字体图标iconfont使用

在字体转换网站https://transfonter.org/中,首先`Add fonts,选中Base64 encodeFormats根据你的字体格式选择,一般是TTF格式,在选择Convert`,转换好之后得到压缩包,解压后就能得到字体的css文件,可是在微信小程序这里并不适用,因为小程序的打包大小必须<2MB,这样得到的css文件都超过了体积限制,这种方法不可行

2.使用wx.loadFontFace加载外部字体
文档:https://developers.weixin.qq.com/miniprogram/dev/api/wx.loadFontFace.html

1234567891011121314
wx.loadFontFace({  family: this.data.fontFamily,  source: 'url("https://sungd.github.io/Pacifico.ttf")',  success(res) {    console.log(res.status)    self.setData({ loaded: true })  },  fail: function(res) {    console.log(res.status)  },  complete: function(res) {    console.log(res.status)  }});

3.在wxss中配置

12345
/*加载网络字体*/@font-face {  font-family: 'Bitstream Vera Serif Bold';  src: url('https://sungd.github.io/Pacifico.ttf');}

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!