小程序引用字体在真机中不生效

在小程序引用字体时遇到的问题，模拟器中正常加载，但是不会执行回调。真机中加载失败，也不会执行回调。百度找了好多文章，都没有解决，于是决定自己找找问题出在哪里。

效果图如下：

模拟器：真机：

代码：

尝试用了两种方式加载字体，还是不行，之后也试了在页面中单独调用，也不行。

去看了一下UNIAPP的文档，没有找到想要的答案。

引入中文字体，体积过大时会发生错误，建议抽离出部分中文，减少体积，或者用图片替代微信小程序端只支持网络字体，字体链接必须是https。App支持网络或本地的字体（本地字体需使用平台绝对路径）。微信小程序端字体链接必须是同源下的，或开启了cors支持，微信小程序的域名是servicewechat.comcanvas等原生组件不支持使用接口添加的字体工具里提示 Faild to load font可以忽略

然后是QQ小程序，直接写着不支持。

微信小程序：

字体文件返回的 contet-type 参考 font，格式不正确时会解析失败。字体链接必须是https（ios不支持http)字体链接必须是同源下的，或开启了cors支持，小程序的域名是servicewechat.comcanvas等原生组件不支持使用接口添加的字体工具里提示 Faild to load font可以忽略'2.10.0' 以前仅在调用页面生效。

uniapp和QQ小程序的文档都说不支持，但是我把一个加载字体的DEMO上传后，发现该方法可以使用，并且字体生效。

在微信小程序该接口的文档下面，也有几个类似问题的文章，我大概看了一下，貌似该接口本身就有点问题，比如会出现IOS正常但安卓不生效，没有回调函数之类的问题，技术人员也让反馈该问题。分析了一下问题，首先是文件大小，我试了30k、300l、1m都不行，但是看到有文章说测试过10M没问题，所以应该不是文件大小问题。然后是接口调用的位置，我一开始是在APP文件中调用，没有执行回调，把接口的调用放在页面中调用后，回调执行了，QQ/微信小程序都报错，QQ小程序里还有个cbID，这个参数会根据接口调用次数增加。

{status: "error", errMsg: "loadFontFace:fail "}

但是还会出现另一个问题，偶尔会不执行，也没有回调，考虑到QQ官方文档说不支持，那可能就是这个接口本身还没有完善所导致的问题了。

然后看了一下DEMO实例的字体文件和我引用的字体文件的响应头：

可以确定是内容类型导致字体不能正常加了。小程序用的不是我的服务器，我把字体文件传到自己服务器后，修改的响应头：

app.use('/static/fonts/*',(req,res,next) => {    res.header("Access-Control-Allow-Origin", "*");    res.header("Content-Type", "font/ttf");    next()})

再调用该接口，问题解决。

评论