Ionic v3.19自定义字体Candara在Android Oreo设备无法加载

我之前在Ionic 3项目里也碰到过类似的字体加载坑，尤其是在Android设备上明明构建后能看到文件，但就是不显示。结合你的情况，给你几个具体的排查和解决步骤：

1. 检查@font-face规则的路径与格式兼容性 #

首先确认你的variables.scss里的字体规则是否正确，Android对不同字体格式的支持可能和浏览器有差异，建议同时包含TTF、WOFF等格式，并且路径要对应Ionic构建后的实际位置：

@font-face {
  font-family: 'Candara';
  // 注意路径：Ionic 3中src/assets在构建后对应www/assets，所以用相对路径../assets/...
  src: url('../assets/font/Candara.ttf') format('truetype'),
       url('../assets/font/Candara.woff') format('woff'),
       url('../assets/font/Candara.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

// 确保全局应用该字体，比如在body或ion-app上设置
body, ion-app {
  font-family: 'Candara', sans-serif;
}

要注意font-family的名称必须和你引用时完全一致，大小写也要匹配。

2. 强制Ionic构建时复制字体文件到APK #

有时候Ionic的默认构建规则可能漏掉某些字体文件，你需要在config.xml中添加resource-file配置，明确告诉打包工具要把字体文件拷贝到APK对应的目录：

<platform name="android">
  <!-- 添加字体文件的复制规则 -->
  <resource-file src="src/assets/font/Candara.ttf" target="assets/font/Candara.ttf" />
  <resource-file src="src/assets/font/Candara.woff" target="assets/font/Candara.woff" />
  <resource-file src="src/assets/font/Candara.woff2" target="assets/font/Candara.woff2" />
</platform>

添加后执行ionic cordova build android重新构建，这样字体文件会被强制打包进APK的assets/font目录。

3. 验证APK内的字体文件是否存在 #

你可以用APK解压工具打开生成的APK包，检查assets/font目录下是否真的有你的Candara字体文件。如果没有，说明构建时复制失败，需要检查路径是否写错，或者清理Ionic缓存后重新构建：

# 清理Ionic缓存
ionic cordova clean android
# 重新构建
ionic cordova build android --prod

4. 用Chrome远程调试排查请求错误 #

既然你已经用Chrome开发者工具连接了设备，切换到Network标签，过滤Font类型的请求，看看Candara字体的请求状态：

• 如果是404错误：说明@font-face里的路径不对，尝试把路径改成./assets/font/Candara.woff或者绝对路径/assets/font/Candara.woff试试
• 如果是其他错误：检查字体文件是否损坏，换一个确认正常的Candara字体文件测试

5. 处理Android Oreo的字体加载限制 #

Android Oreo对WebView的字体加载有一些安全限制，比如禁止加载损坏的字体文件，或者缓存导致的旧资源无法更新。你可以尝试：

• 卸载应用后完全重装，清除WebView缓存
• 确保字体文件没有损坏（本地用系统字体查看器打开确认）

按照这些步骤排查下来，大部分字体加载问题都能解决。我之前就是因为没在config.xml里添加resource-file配置，导致字体没被打包进APK，加上之后就正常显示了。

内容的提问来源于stack exchange，提问作者Ciaran Gallagher