微信小程序> 微信小程序使用自定义字体的三种方法

微信小程序使用自定义字体的三种方法

浏览量:8258 时间: 来源:weixin_34332905

一、loadFontFace接口

小程序官方提供的接口,最便捷的加载字体的方法,不过限制颇多。必须https且同源,canvas等原生组件不支持。注意!!使用本地文件无效,必须使用网络地址。

官方文档

演示代码:

wx.loadFontFace({  family: 'FZSuXSLSJW',  source: 'url("https://we7.stuyun.com/FZSuXSLSJW.ttf")',  success: res => {    console.log('font load success', res)  },  fail: err => {    console.log('font load fail', err)  }})复制代码

二、face-font url

传统的css规则,跟loadFontFace限制一样,必须https且同源,不支持canvas等原生组件,不支持本地文件。

菜鸟教程

演示代码:

@font-face {    font-family: 'FZSuXSLSJW';    src: url("https://we7.stuyun.com/FZSuXSLSJW.ttf")}复制代码

三、face-font base64

网上教程常介绍的方法,到transfonter上传文件,formats只勾选ttf就行。可以将字体转换成base64的face-font,复制到wxss里面就可以使用。但是缺点也很明显,小程序最大体积限制只能2m,随便一个中文字体就超过了。

四、总结

原本计划是使用canvas实现图片编辑,并且添加可自定义文字,然后就尝试一下能否更换字体,无奈尝试了上面的三种方法都不和我意。前两种方法在工具上预览是可以的,但是在安卓和iOS真机上,canvas上都无效。而第三种方法太浪费空间资源,2m的包大小限制直接淘汰了。

工具上的预览:

Android真机预览:

所以真的没办法了吗??

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎