微信小程序字体在部分真机失效解决办法
uniapp 微信小程序字体加载
1、使用 uni.loadFontFace
uni.loadFontFace({ global: true, // 开启全局生效 family: 'PingFang SC', source: 'url("https://fonts/xs.ttf")', success() { console.log('success') }, fail(e) { console.log('err:',e) } })
注意:
- 格式支持常见的基本所有类型(ttf、woff、woff2(web主流)、otf、sfnt),建议格式为 TTF 和 WOFF(推荐),WOFF2 在低版本的 iOS 上会不兼容。
- 字体链接仅支持https链接
- 字体链接访问需满足浏览器同源策略,字体文件资源设置CORS的
Access-Control-Allow-Origin
为小程序域名:servicewechat.com
或者*才可以。
经过测试,ios和小米手机对于未设置CORS的字体文件仍然可以正常加载,荣耀和vivo无法正常加载,需要设置正确的CORS即可正常加载
- 在加载成功之后,会自动刷新字体显示
- 不需要设置downloadFile合法域名及业务域名。
解决办法:
修改 nginx 配置
location ~ .*\.(eot|otf|ttf|woff|woff2|svg)$ { add_header Access-Control-Allow-Origin *; }
p.s 如果是使用oss,去配置开启跨域即可
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)