微信小程序引入字体在部分机型失效不兼容解决办法

写小程序页面,美工作图用了特殊字体

微信小程序引入字体在部分机型失效不兼容解决办法_第1张图片

引入代码:

@font-face {
  font-family: 'huxiaobo';
  src: url("https://xxxxxxxx.top/assets/fonts/huxiaobonanshenti.woff")
}
.font-loaded {
  font-family: "huxiaobo";
}

上线后发现部分安卓机型不兼容,查资料发现荣耀和vivo需要设置正确的CORS即可正常加载。

字体链接访问需满足浏览器同源策略,字体文件资源设置CORS的Access-Control-Allow-Origin为小程序域名:servicewechat.com或者*才可以

解决办法:

修改服务器nginx 配置,站点配置文件加入以下代码

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

你可能感兴趣的:(微信小程序,微信小程序,小程序,跨域)