微信小程序字体在部分真机失效解决办法

uniapp 微信小程序字体加载

1、使用 uni.loadFontFace

uni.loadFontFace({
  global: true, // 开启全局生效
   family: 'PingFang SC',
   source: 'url("https://fonts/xs.ttf")',
   success() {
     console.log('success')
   },
   fail(e) {
     console.log('err:',e)
   }
 })

注意:

  1. 格式支持常见的基本所有类型(ttf、woff、woff2(web主流)、otf、sfnt),建议格式为 TTF 和 WOFF(推荐),WOFF2 在低版本的 iOS 上会不兼容。
  2. 字体链接仅支持https链接
  3. 字体链接访问需满足浏览器同源策略,字体文件资源设置CORS的Access-Control-Allow-Origin为小程序域名:servicewechat.com或者*才可以。
经过测试,ios和小米手机对于未设置CORS的字体文件仍然可以正常加载,荣耀和vivo无法正常加载,需要设置正确的CORS即可正常加载
  1. 在加载成功之后,会自动刷新字体显示
  2. 不需要设置downloadFile合法域名及业务域名。

解决办法:

修改 nginx 配置

  

location ~ .*\.(eot|otf|ttf|woff|woff2|svg)$
{
  add_header Access-Control-Allow-Origin *;
}

 p.s 如果是使用oss,去配置开启跨域即可

posted @ 2023-08-28 14:41  当下是吾  阅读(1217)  评论(0编辑  收藏  举报