小程序

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

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

在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

经测试完美解决😄