uni-app单独开发的H5页面里面有自定义的woff2的字体包在安卓端通过webview的形式发现也不加载字体苹果端和web端正常

uni-app单独开发的H5页面里面有自定义的woff2的字体包在安卓端通过webview的形式发现也不加载字体苹果端和web端正常

2025-09-11 14:51

开发环境 版本号 项目创建方式
9 回复

你好能详细说明一下你的问题吗？最好是提供附带的示例项目，这样能够更好帮助你解决问题

更多关于uni-app单独开发的H5页面里面有自定义的woff2的字体包在安卓端通过webview的形式发现也不加载字体苹果端和web端正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我单独开发的h5页面，项目中引入了思源宋体的字体包 body{margin:0; padding:0;} div,dl,dt,dd,ul,ol,li,p,span,h2,h3,h4,h5{margin:0; padding:0;} ul,ol{list-style:none;} img{border:0;margin: 0;} body{ font-family: ‘Source Han Sans SC’, sans-serif; } @font-face { font-family: ‘Source Han Sans SC’; / 为字体指定一个名称 / src: url(’…/font/SourceHanSerifCN-Regular.ttf’) format(opentype); font-weight: normal; / 字体粗细 / font-style: normal; / 字体样式 / }
.btn{ width: 100%; height: 0.46rem; background: #37BEB3; border-radius: 0.06rem; outline: none; color: #fff; font-size: 0.18rem; border: 0; }

经过测试发现，用电脑浏览器能正常渲染字体，苹果端的web-view也可以正常渲染字体，安卓端的web-view无法正常渲染字体，在安卓手机自带的浏览器打开页面正常渲染字体。我刚刚更新为ttf格式的文件，安卓端的web-view依然无法正常渲染字体，在安卓手机自带的浏览器打开页面正常渲染字体。

回复 q***@gmail.com: 可以尝试提供一下一个可以复现的项目看看

在安卓手机链接电脑打开chrome的调试模式之后发现，没有加载font

苹果手机链接电脑打开Safari的调试模式之后发现，加载了font

应该是路径有问题，我这边用安卓测是能正常显示加载的字体的，不过我的html是放在static测的


但是安卓和苹果都是一套代码呀，按理来说要是路径问题，苹果和浏览器都会报错的

在安卓端WebView中无法加载自定义woff2字体，通常是由于字体文件路径或WebView配置问题导致的。以下是几个关键排查点：

  1. 字体路径问题
    确保字体文件路径正确且可访问。建议使用绝对路径或网络路径，避免相对路径。检查字体文件是否已正确打包到静态资源目录。

  2. WebView跨域限制
    安卓WebView默认禁止跨域请求，若字体托管在外部域名，需通过WebSettings.setAllowFileAccess(true)和setAllowFileAccessFromFileURLs(true)开启权限（注意安全风险）。

  3. MIME类型配置
    服务器需正确返回woff2的MIME类型（font/woff2）。若字体通过本地文件加载，安卓可能因未识别类型而拦截。

  4. 字体加载语法
    检查CSS中[@font-face](/user/font-face)是否规范：

    [@font-face](/user/font-face) {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;
}
回到顶部