Ionic 2自定义字体引入问题：浏览器正常但安卓APK不显示

检查资源路径与打包配置 #

• 把字体文件统一放到src/assets/fonts目录，路径别带中文或特殊符号，这是Ionic默认的资源存放目录，打包时更容易被识别。
• 检查webpack配置（Ionic 2对应webpack.config.js），确保字体文件被正确打包到APK中，添加以下规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(ttf|otf|eot|woff|woff2)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'assets/fonts/'
          }
        }
      }
    ]
  }
};

修正CSS字体引用路径 #

• CSS中引用字体必须用相对路径，绝对路径在安卓打包后会失效，正确示例：

@font-face {
  font-family: 'CustomFont';
  src: url('../assets/fonts/CustomFont-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

• 路径需根据CSS文件位置调整：比如CSS在src/app/theme下用../assets/fonts/xxx.ttf，在src/assets/css下用./fonts/xxx.ttf即可。

验证字体文件兼容性 #

• 安卓优先支持TTF、OTF格式，避免使用浏览器专属的小众字体格式。
• 将字体文件传到安卓设备本地测试显示，排除文件损坏的可能。

清理缓存重新打包 #

• 旧缓存会导致资源未更新，执行以下命令彻底清理后重新打包：

ionic cordova clean android
ionic cordova build android --prod

• 必须加--prod参数，生产环境打包会正确处理资源路径，开发环境打包易出现路径问题。

检查config.xml配置 #

• 如果手动添加了字体资源，确保config.xml里的<resource-file>标签配置正确：

<resource-file src="src/assets/fonts/CustomFont-Regular.ttf" target="assets/fonts/CustomFont-Regular.ttf" />

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