uniapp之微信小程序-使用特殊字体以及Echarts中特殊字体不生效处理

开发过程中系统字体无法满足UI样式，设计给出字体包， uni官方文档地址：uni.loadFontFace(Object object) | uni-app官网 (dcloud.net.cn)

1. 将字体包放在OSS上，使用uni.loadFontFace()加载字体

参数说明

属性	类型	默认值	必填	说明
global	Boolean	false	否	是否全局生效。微信小程序 '2.10.0'起支持全局生效，需在 app.vue 中调用。
family	String		是	定义的字体名称
source	String		是	字体资源的地址。见下
desc	Object		否	可选的字体描述符（uni-app x 暂不支持）
success	Function		否	接口调用成功的回调函数
fail	Function		否	接口调用失败的回调函数
complete	Function		否	接口调用结束的回调函数（调用成功、失败都会执行）

在App.vue中调用loadFontFace

uni.loadFontFace({
  family: 'Bitstream',
  source: 'url("https://sungd.github.io/Pacifico.ttf")',
  success() {
	  console.log('success')
  }
})

2. 定义CSS 样式

.font-b {
    font-family: 'Bitstream';
}

font-family 的值就是loadFontFace中family的值 这样就可以在页面中应用class样式

如果在echarts中使用特殊字体就需要注意

在微信小程序文档中存在scopes 参数，此参数决定字体的作用范围，也就是Echarts中使用特殊字体，需要设置scopes参数，在uni的文档中未曾体现。 微信小程序文档： 界面 / 字体 / wx.loadFontFace (qq.com)

uni.loadFontFace({
  family: 'Bitstream',
  scopes: ['webview', 'native'],//设置字体作用范围，设置native可在Canvas 2D中使用
  source: 'url("https://sungd.github.io/Pacifico.ttf")',
  success() {
	  console.log('success')
  }
})

由于Echarts是通过canvas来绘制的，所以需要设置scopes的参数为native 才能生效