微信小程序（以taro为例）引用cdn字体在安卓无效（调试模式可以看到报错）

最新推荐文章于 2024-02-22 09:38:34 发布

小飞机噗噗噗

最新推荐文章于 2024-02-22 09:38:34 发布

阅读量1k

点赞数

文章标签：微信小程序 taro 小程序前端 react.js css

本文链接：https://blog.csdn.net/qq_37057426/article/details/132983578

版权

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

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

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

Taro.loadFontFace({
    global: true,
    family: 'DFPHeiW3-GB',
    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")'
  });

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

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

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

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

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