本地字体上传到网络后运用到微信小程序详细过程

前言

首先是直接在本地直接使用很不方便，因为微信小程序最多上传 2m 代码，而有时候一个字体文件就有十几 m 或者更多。。。 使用微信小程序自带的 wx.loadFontFace() 改变项目字体有很多限制，最主要的是要 https 的，今天遇到这个问题，网上并没有很实用的方法，刚刚弄好，下面自己写一下教程

本地字体上传到网络

这里使用 github，因为 github 生成的地址本身就是 https 的，但是由于 github 是国外的，所以静态资源放上面有时候也会请求不到或者很慢，所以只是举个例子

创建一个空仓库 创建完成后进入，然后点击 upload files 上传字体文件

完事后，点击仓库上的设置 往下拉，找到 GitHub Pages 改变页面所在分支，然后保存 保存后会自动刷新页面，然后找到这里会看到给你一个网址，这个网址就是仓库所在地址，也可以在仓库放 index.html 文件也可以访问到，这里主要说小程序引入字体，就不解释这个了 直接点击连接访问是 404，当然，因为咱们没放页面，但是也没有必要 在链接后面加上刚才上传的字体的名字再访问 就会调出下载页面了，不用下载，不需要，就是验证一下前面没错，这里完成就表示可以访问到这个网络字体了

小程序使用此字体

就用小程序自带的 wx.loadFontFace() 就行了，链接就写刚才访问字体的链接，例如 sywdebug.github.io/test/pingfa…

我是这么写的
app.js
App({
  onLaunch: function () {
    wx.loadFontFace({
      family: 'pingfang',
      global: true,
      source: 'url("https://sywdebug.github.io/test/pingfang.ttf")',
      success: res => {
        console.log('font load success', res)
      },
    })
  },
})

全局设置字体的话只用在app.wxss里设置
page {
  font-family:"pingfang";
}
就行了，
如果使用
view,text等等{
	font-family:"pingfang"
}
渲染太慢了，每个页面等一两秒才会改变字体，而且开头会报个错