微信小程序加载自定义字体详细解决方案_微信小程序引入本地字体

微信小程序加载自定义字体详细解决方案

wx.loadFontFace({
  global: true,
  family: 'CustomFont',
  source: 'url("https://www.xxx.com/fonts/SourceHanSerif-Bold.otf")',
  scopes: ["webview", "native"],
  success: console.log,
  fail: console.log,
})
1
2
3
4
5
6
7
8

首先在小程序中添加如下代码，来加载字体资源

global: true --表示是否全局生效，设置为true后可以在页面样式中直接使用
family --定义的字体名称，页面样式中使用的就是这个名称
source --字体链接，需要https协议
scopes --应用范围，webview | native，webview表示在页面中使用，如果需要在canvas中使用，则要加上native

一切就绪，如果字体地址没有问题，在开发者工具中就有效果了

但是，当你使用预览、真机调试或发体验版的时候，会发现字体居然没有生效

这个时候，就需要去nginx里做一下CORS配置，如下

add_header Access-Control-Allow-Origin *;
1

至此，再次打开小程序应该就没啥问题了