uni-app 腾讯x5内核app-vue渲染系统字体失败

在 uni-app 中使用腾讯 X5 内核时，可能会遇到 app-vue 渲染系统字体失败的问题。这通常是由于 X5 内核的字体加载机制或字体缓存问题导致的。以下是一些可能的解决方案和排查步骤：

1. 检查字体文件路径

确保字体文件的路径正确，且字体文件已经正确打包到应用中。

• 在 static 目录下放置字体文件（如 .ttf 或 .woff 文件）。
• 在 CSS 中使用 [@font-face](/user/font-face) 引入字体：

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

2. 清除 X5 内核缓存

X5 内核可能会缓存字体文件，导致更新后的字体无法生效。

• 在应用的 onLaunch 或 onShow 生命周期中，调用以下代码清除缓存：

  if (plus && plus.x5) {
    plus.x5.clearCache();
  }

3. 强制使用系统字体

如果自定义字体无法加载，可以尝试回退到系统字体。

• 在 CSS 中设置回退字体：

  body {
    font-family: 'CustomFont', sans-serif;
  }

4. 检查 X5 内核版本

确保使用的 X5 内核版本支持所需的字体格式。

• 在 manifest.json 中配置 X5 内核版本：

  "x5": {
    "coreVersion": "latest"
  }

5. 调试字体加载问题

使用开发者工具检查字体是否加载成功。

• 在 Chrome 或微信开发者工具中，检查 Network 面板，查看字体文件是否成功加载。
• 检查 Console 面板，查看是否有字体加载相关的错误信息。

6. 使用 Base64 嵌入字体

如果字体文件较小，可以尝试将字体转换为 Base64 编码，直接嵌入 CSS 中。

• 使用工具（如 transfonter）将字体转换为 Base64。
• 在 CSS 中使用：

  [@font-face](/user/font-face) {
    font-family: 'CustomFont';
    src: url('data:font/truetype;base64,<base64-encoded-font>') format('truetype');
  }

7. 检查 X5 内核的字体加载限制

X5 内核可能对字体加载有一些限制，例如跨域问题或文件大小限制。

• 确保字体文件与页面同源。
• 如果字体文件较大，尝试压缩字体文件。

8. 更新 uni-app 和 X5 内核

确保使用的 uni-app 和 X5 内核是最新版本，以修复已知的字体加载问题。

• 更新 uni-app：

  npm update [@dcloudio](/user/dcloudio)/uni-app