当前位置:   article > 正文

微信小程序(以taro为例)引用cdn字体在安卓无效(调试模式可以看到报错)_微信小程序引入字体文件手机上不生效

微信小程序引入字体文件手机上不生效

某次客户提供了字体文件,需要在小程序中显示该特殊字体,因为我们是taro框架开发的微信小程序,所以用taro的方法Taro.loadFontFace,下面是开发流程:

1、首先将下载下来的以.ttf结尾的文件放到cdn上,得到以https:开头的文件。

2、用taro的方法Taro.loadFontFace引入字体文件(如果全局生效就全局引入,单页面生效就单页面引入),如果是原生小程序可以用wx.loadFontFace

  1. Taro.loadFontFace({
  2. global: true,
  3. family: 'DFPHeiW3-GB',
  4. source: 'url("https://ry-1252883161.cos.ap-shanghai.myqcloud.com/rfz/mini/fonts/%E5%8D%8E%E5%BA%B7%E9%BB%91%E4%BD%93W3%28P%29.TTF")'
  5. });

 3、在需要用的css文件中引用就行(font-family: DFPHeiW3-GB;)

———————————————————————————————————————————到此为止一切正常,打开ios体验小程序,字体也能完美展示,但是换到安卓就毫无作用,打开调试,发现报错了,大概意思是字体文件未加载,突然想到,之前后台加载过字体文件是不是也类似跨域问题,截图如下:

翻了微信小程序的字体引入api,上面是这么写的:

于是让后端在服务器上将微信小程序的域名加上跨域白名单,https://servicewechat.com, 不同的服务器加白名单方式不同,这个以具体服务器为准。

加上白名单后,安卓也能完美的展示字体文件了。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/IT小白/article/detail/508949
推荐阅读
相关标签
  

闽ICP备14008679号