uni-app ios打包不显示iconfont图标

在 uni-app 中，iOS 打包后不显示 iconfont 图标的问题，通常与以下几个原因有关。你可以按照以下步骤进行排查和解决：

1. 检查字体文件是否正确引入

确保你的 iconfont 字体文件（如 .ttf 或 .woff 文件）已正确引入到项目中。

• 在 App.vue 或页面的 <style> 标签中，使用 [@font-face](/user/font-face) 引入字体文件：

  [@font-face](/user/font-face) {
    font-family: 'iconfont';
    src: url('~@/static/fonts/iconfont.ttf') format('truetype');
  }

  确保路径正确，且字体文件存在于 static 目录下。

2. 检查字体文件格式

iOS 对字体文件的格式要求较高，确保字体文件是 .ttf 或 .woff 格式，并且文件本身没有损坏。

• 可以通过在线工具（如 Font Squirrel）将字体文件转换为兼容的格式。

3. 检查字体名称

确保 [@font-face](/user/font-face) 中定义的 font-family 名称与代码中使用的名称一致。

• 例如：

  .icon {
    font-family: 'iconfont';
  }

4. 检查 iOS 打包配置

在 iOS 打包时，需要确保字体文件被正确打包到应用中。

• 在 HBuilderX 中，打开 manifest.json 文件，检查 app-plus 配置中是否包含了字体文件：

  "app-plus": {
    "distribute": {
      "ios": {
        "fonts": [
          "static/fonts/iconfont.ttf"
        ]
      }
    }
  }

5. 清理缓存并重新打包

有时缓存问题可能导致字体未正确加载。

• 在 HBuilderX 中，选择 运行 -> 清理项目缓存，然后重新打包。

6. 检查 iOS 设备权限

iOS 设备可能会限制加载外部字体文件，确保你的应用有权限加载字体。

• 在 Info.plist 文件中添加以下配置：

  <key>UIAppFonts</key>
  <array>
    <string>static/fonts/iconfont.ttf</string>
  </array>

7. 调试字体加载

如果以上方法仍未解决问题，可以通过以下方式调试字体是否加载成功：

• 在 iOS 设备上，使用 Safari 的开发者工具检查字体是否加载。
• 在代码中动态检查字体是否可用：

  document.fonts.check('12px iconfont').then((isLoaded) => {
    console.log('Font loaded:', isLoaded);
  });

8. 使用 Base64 编码字体

如果字体文件仍然无法加载，可以尝试将字体文件转换为 Base64 编码，直接嵌入到 CSS 中：

• 使用在线工具（如 Font to Base64）将字体文件转换为 Base64 字符串。
• 在 CSS 中使用：

  [@font-face](/user/font-face) {
    font-family: 'iconfont';
    src: url('data:font/truetype;charset=utf-8;base64,<Base64字符串>') format('truetype');
  }