React 前端导航

微信小程序开发如何引入第三方字体

1、新建一个font.js

2、将需要引入的字体上传到云上,必须是https。

3、在font.js中使用微信提供的api下载字体,wx.loadFontFace({})

// 加载字体
  loadFont() {
    //英文
    wx.loadFontFace({
      family: 'xxxx', //设置一个font-family使用的名字
      source: 'url("xxx.com/xxxx")', //字体资源的地址
      success: console.log
    })
    //中文
    wx.loadFontFace({
      family: 'xxxx',
      source: 'url("https://xxx.com/xxxx.otf")',
      success: console.log
    })
  },

4、在要使用页面字体的页面下载字体

const font = require('font.js')
onLoad: function (options) {
    wx.hideShareMenu(); //隐藏转发按钮
    font.loadFont(); //下载字体
  }

5、在wxss中正常使用

font-family: 'xxxx';

声明:本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。邮箱:farmerlzj@163.com。 本站原创内容未经允许不得转载,或转载时需注明出处: 内容转载自: React前端网:https://qianduan.shop/blogs/detail/160
想做或者在做副业的朋友欢迎加微信交流:farmerlzj,公众号:生财空间站。

#微信小程序#字体

相关推荐

微信小程序视频全屏播放object-fit属性

微信小程序开发中,视频竖屏无法占据手机屏幕全屏的问题解决。

Uniapp实现页面禁止滚动

最近作者在编写一个微信小程序的时候,使用到了uniapp。上线后发现很多页面存在下拉可以拉动的情况。