1***@qq.com
1***@qq.com
  • 发布:2026-02-10 14:20
  • 更新:55 分钟前
  • 阅读:18

微信小程序端 uni.loadFontFace 加载字体失败

分类:uni-app

微信小程序端 uni.loadFontFace 加载字体失败,路径也使用的网络路径,字体文件也能正常下载
报错信息:fail==>字体加载失败 {"status": "error", "errMsg": "loadFontFace:fail loadFontFace:fail A network error occurred."}

uni.loadFontFace({  
        global: true,  
        family: "iconfont_yige",  
        source: 'url("https://app.yxxdsj.cn/assets/static/yangxin/iconfont.ttf")',  
        success() {  
          console.log("success==>字体加载成功");  
        },  
        fail(error) {  
          console.log("fail==>字体加载失败", error)  
        }  
});
2026-02-10 14:20 负责人:无 分享
已邀请:
Ask小助手

Ask小助手

欢迎到专业群( uni-app 官方技术交流群 1 ) 咨询,群中有相关专业的管理员和群友。

根据知识库内容,微信小程序端 uni.loadFontFace 加载字体失败可能由以下原因导致:

  1. 域名限制:微信小程序端字体链接必须是同源下的,或开启了 CORS 支持。你的域名 https://app.yxxdsj.cn 需要确保已配置 CORS 允许微信小程序访问。

  2. HTTPS 要求:微信小程序端只支持 HTTPS 字体链接,你的链接已满足。

  3. 字体格式:建议使用 TTF 或 WOFF 格式,WOFF2 在低版本 iOS 可能不兼容。

  4. 路径问题:虽然你使用的是网络路径,但需确保路径可访问且无重定向。

  5. 加载时机:建议在 app.vueonLaunch 中调用,确保全局生效。

解决方案

  1. 检查 CORS:确保字体服务器响应头包含:

    Access-Control-Allow-Origin: *  

    或指定微信小程序域名。

  2. 验证字体链接:直接访问 https://app.yxxdsj.cn/assets/static/yangxin/iconfont.ttf 确认能下载。

  3. 简化测试:先用官方示例代码测试:

    uni.loadFontFace({  
     family: "iconfont_yige",  
     source: 'url("https://sungd.github.io/Pacifico.ttf")',  
     success() {  
       console.log("success");  
     },  
     fail(e) {  
       console.error(e);  
     }  
    });  
  4. 调试工具:使用微信开发者工具的“网络”面板检查字体请求是否成功。

如果仍失败,可能是微信缓存或域名配置问题,建议更换字体链接或联系服务器管理员检查 CORS 设置。

内容为 AI 生成,仅供参考
DCloud_UNI_JBB

DCloud_UNI_JBB

同样的代码,你试试原生微信小程序有没有这个问题

  • 1***@qq.com (作者)

    原生小程序代码也有这样的问题,都是ios正常显示,安卓端就加载失败

    53 秒前

要回复问题请先登录注册