E企盈小程序营销工具技术服务商 热线:4006-838-530

小程序苹方字体

E企盈小程序直播系统

(转载的。不是侵权,csdn,转载的不让编辑,我主要是用来做笔记的,请勿攻击)第一种方式,base64 encode如果字体比较小,如各种英文字体,可以把字体上传到 https://transfonter.org/ 转换成base64格式,然后直接在样式中使用。具体使用可参考 【微信小程序】如何引入外部字体样式一文。第二种方式,官方API如果字体比较大,如各种中文字体动辄超过10mb,用base64显然是不合适的,小程序超过2m还要分包处理,为了一个字体实在不值当,那么可以用官方的API wx.loadFontFace加载外部字体,像这样:wx.loadFontFace ({family: ‘PingFangSC-Medium’,source: ‘url(“https://www.your-server.com/PingFangSC-Medium.ttf”)’,success: function(){console.log(‘load font success’)}})这里需要注意的一点是,family处的名称就是使用时font-family的名称,举个例子,上方加载的字体这样使用:.foo {font-family:PingFangSC-Medium;}建议由于字体可能会比较大,所以不建议在一个小程序中使用多种字体,这样会影响用户体验。为了保证界面效果,可以在onLoad周期加载字体,在success回调中执行后续操作,必要时加上Loading,让程序更加友好。以下来自掘金微信小程序使用自定义字体的三种方法一、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(转换工具网址https://transfonter.org/)上传文件,formats只勾选ttf就行。可以将字体转换成base64的face-font,复制到wxss里面就可以使用。但是缺点也很明显,小程序最大体积限制只能2m,随便一个中文字体就超过了。四、总结原本计划是使用canvas实现图片编辑,并且添加可自定义文字,然后就尝试一下能否更换字体,无奈尝试了上面的三种方法都不和我意。前两种方法在工具上预览是可以的,但是在安卓和iOS真机上,canvas上都无效。而第三种方法太浪费空间资源,2m的包大小限制直接淘汰了。作者:郭靈纹链接:https://juejin.im/post/5cd0402bf265da038932a88e来源:掘金

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序苹方字体
分享到: 更多 (0)
E企盈小程序直播营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏