自定义古吉拉特字体GopikaTwo在安卓浏览器及混合应用失效求助

你的CSS代码在桌面浏览器正常工作，但安卓端（尤其是混合应用）有几个常见的适配坑需要处理，下面是针对性的解决方案：

1. 确认字体文件路径的正确性 #

混合应用的资源路径规则和桌面网页不同，你需要确保字体文件的存放位置与CSS中的引用路径完全匹配：

• 若字体文件放在项目的www/fonts目录（比如Capacitor/Cordova项目），CSS路径应改为根相对路径：

  @font-face {
    font-family: 'GopikaTwo';
    src: url('/fonts/GopikaTwo.eot');
    src: url('/fonts/GopikaTwo.eot?#iefix') format('embedded-opentype'),
         url('/fonts/GopikaTwo.woff2') format('woff2'),
         url('/fonts/GopikaTwo.woff') format('woff'),
         url('/fonts/GopikaTwo.ttf') format('truetype'),
         url('/fonts/GopikaTwo.svg#GopikaTwo') format('svg');
    font-weight: normal;
    font-style: normal;
  }
  

• 如果CSS文件在www/css目录，也可以用相对路径：../fonts/GopikaTwo.eot

2. 配置混合应用的资源访问权限 #

如果使用Capacitor或Cordova框架，需要确保字体文件被正确打包且无访问限制：

• Capacitor：在capacitor.config.ts中检查服务器配置，允许本地资源加载：

  export default defineConfig({
    server: {
      allowNavigation: ["*"],
      cleartextTraffic: true // 本地资源加载可能需要开启此项
    }
  });
  

• Cordova：在config.xml中添加允许本地导航的配置：

  <access origin="*" />
  <allow-navigation href="*" />
  

3. 针对安卓WebView的字体渲染优化 #

安卓系统的WebView对字体加载有特殊要求，试试这些调整：

• 给@font-face添加font-display: swap;，避免字体加载失败时直接 fallback 到系统字体：

  @font-face {
    font-family: 'GopikaTwo';
    /* 保留原有src等属性 */
    font-display: swap;
  }
  

• 在应用初始化代码中强制WebView识别自定义字体（比如在index.js或app.ts中）：

  if (window.Android) {
    // 针对安卓WebView强制设置默认字体
    document.documentElement.style.fontFamily = 'GopikaTwo, Roboto, Helvetica Neue, sans-serif';
  }
  

4. 简化字体格式，优先兼容安卓 #

安卓对woff和ttf格式的支持最稳定，你可以简化@font-face规则，排除可能干扰的格式：

@font-face {
  font-family: 'GopikaTwo';
  src: url('/fonts/GopikaTwo.woff') format('woff'),
       url('/fonts/GopikaTwo.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

如果字体文件存在兼容性问题，可用字体转换工具（比如FontSquirrel转换器）重新生成安卓优化版的字体文件。

5. 确认元素正确应用字体样式 #

检查HTML元素是否已添加.gopika-two类，或者直接给全局元素设置默认字体：

body {
  font-family: 'GopikaTwo', 'Roboto', 'Helvetica Neue', sans-serif !important;
}

按上述步骤逐一排查，基本可以解决安卓混合应用中自定义字体不生效的问题。

内容的提问来源于stack exchange，提问作者parth.hirpara