小程序安卓和ios使用自定义字体,解决安卓不生效问题

小程序安卓和ios使用自定义字体,解决安卓不生效问题,第1张

官网介绍

官网文件的loadFontFace也可以实现自定义字体引入和使用,如果需要在app.js使用记得加上global:true,不然app.js不会执行背景:项目中要把所有字体改为宋体,这里我使用的是font-face引入外部字体文件 准备字体文件 这里我准备的是OTF的文件,是找UI要的。把该文件上传到自己的服务器上,生成一个访问的链接。在app.wxss中使用

@font-face {
  font-family: 'SimSun700';
  src: url('链接地址必须是https的')format('truetype');
}

.sim-sun700 {
  font-family: 'SimSun700' !important;
}
定义好css的类名,这样在需要使用的直接使用类名 测试 定义好字体以后,会发现在模拟器和ios手机上字体是生效的,但是在安卓上字体不生效。 安卓调试解决字体失效问题 使用loadFontFace官方的方法,发现在安卓也不好使。但是官网方法中有失败函数回调,发现字体没有加载成功,在看官网有句解释:字体链接必须是同源下的,或开启了cors支持,小程序的域名是servicewechat.com推测应该是同源策略的问题,让后台去服务器开启跨域解决。
//nginx 配置,亲测可用
location ~* \.(eot|ttf|woff|woff2|svg)$ {
    add_header Access-Control-Allow-Origin *;
}
配置完上述代码后,使用font-face引入和loadFontFace引入字体安卓都是生效的。

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/993467.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-21
下一篇2022-05-21

发表评论

登录后才能评论

评论列表(0条)

    保存