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

一、loadFontFace接口

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

官方文档

演示代码：

js:

wx.loadFontFace({
  family: 'FZSuXSLSJW',
  source: 'url("https://static.heytea.com/taro_trial/v1/font/WenYue-XinQingNianTi-NC-W8_1.otf")',
  success: res => {
    console.log('font load success', res)
  },
  fail: err => {
    console.log('font load fail', err)
  }
})

wxss:

/* 使用 */
.main-title {
  font-family: 'FZSuXSLSJW';
  font-size: 55rpx;
  padding-bottom: 20rpx;
}

wxml:

<view class="main-title">店内自取</view>

 

二、face-font url

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

菜鸟教程

演示代码：

wxss:

@font-face {
    font-family: 'FZSuXSLSJW';
    src: url("https://static.heytea.com/taro_trial/v1/font/WenYue-XinQingNianTi-NC-W8_1.otf")
}

/* 使用 */
.main-title {
  font-family: 'FZSuXSLSJW';
  font-size: 55rpx;
  padding-bottom: 20rpx;
}

wxml:

<view class="main-title">店内自取</view>

效果图:

三、face-font base64

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

 

 

 

 

 

 

四、总结

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

工具上的预览：

 

 

Android真机预览：

 

 

所以真的没办法了吗？？

 

如果你感觉有收获，欢迎给我打赏 ———— 以激励我输出更多优质内容