微信小程序> 微信小程序使用苹方字体

微信小程序使用苹方字体

浏览量:580 时间: 来源:杰先森

第一种方式,base64 encode

如果字体比较小,如各种英文字体,可以把字体上传到 https://transfonter.org/ 转换成base64格式,然后直接在样式中使用。具体使用可参考 【微信小程序】如何引入外部字体样式一文。

第二种方式,官方API

如果字体比较大,如各种中文字体动辄超过10mb,用base64显然是不合适的,小程序超过2m还要分包处理,为了一个字体实在不值当,那么可以用官方的API wx.loadFontFace加载外部字体,像这样:

1

2

3

4

5

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的名称,举个例子,上方加载的字体这样使用:

1

2

3

.foo {

    font-family:PingFangSC-Medium;

}

建议

由于字体可能会比较大,所以不建议在一个小程序中使用多种字体,这样会影响用户体验。为了保证界面效果,可以在onLoad周期加载字体,在success回调中执行后续操作,必要时加上Loading,让程序更加友好。

转载自:https://yanziyu.tech/2018/12/22/wxapp-fonts/#more

 

 字体下载链接:https://pan.baidu.com/s/1nL-ELfzMhnD6L2yROrQL5Q 提取码: crfp

版权声明

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

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

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