小程序引用网络字体在安卓无效

在微信小程序中引用网络字体有两种写法。

在css文件中引用

1
2
3
4
@font-face {
font-family: 'Pacifico';
src: url('https://sungd.github.io/Pacifico.ttf');
}

使用 wx.loadFontFace 加载字体

1
2
3
4
wx.loadFontFace({
family: 'Pacifico',
source: 'url("https://sungd.github.io/Pacifico.ttf")',
})

安卓中加载失败的问题

iOS 里两种方式都可以,但在安卓手机上都无法正常加载字体,先看下官网的相关文档是这样描述的:

动态加载网络字体,文件地址需为下载类型。‘2.10.0’起支持全局生效,需在 app.js 中调用。

注意:

  1. 字体文件返回的 contet-type 参考 font,格式不正确时会解析失败。
  2. 字体链接必须是https(ios不支持http)
  3. 字体链接必须是同源下的,或开启了cors支持,小程序的域名是servicewechat.com
  4. 工具里提示 Faild to load font可以忽略
  5. ‘2.10.0’ 以前仅在调用页面生效。

其他几项都可以忽略了,应该都可以满足条件,最主要的问题在第3条,安卓下必须开启跨域支持,以下例子是我使用阿里云的 OSS 的跨域配置(权限管理 / 跨域设置):

image-20220121143840096

经测试完美解决😄