uni-app 导航栏使用字体图标会显示正方问号 安卓有的会显示文字

发布于 1周前 作者 eggper 来自 Uni-App

uni-app 导航栏使用字体图标会显示正方问号 安卓有的会显示文字
图片1 图片2

Harmonyos Next教程
4 回复

我也遇到了，不知道怎么回事，有时候能出来有时候出不来，真机调试有，打完包又不显示。后面我直接换成svg了


我也遇到了，不知道怎么回事，有时候能出来有时候出不来，真机调试有，打完包又不显示。后面我直接换成svg了

iconfont 确实会存在这个问题,在其它问题下找到答案,方便后面的人解决问题
解决方法： 导出ttf资源时，修改ICONFONT项目（没有就先创建）：“更多操作”-》“编辑项目”，将“Font Family”改成非“iconfont”的值，再导出。

在uni-app中遇到导航栏使用字体图标显示问题（如显示正方问号或文字），通常是由于字体图标的引用方式或兼容性问题导致的。以下是一些可能的解决方案和代码示例，帮助你解决这个问题。

1. 确保字体图标文件正确引用

首先，确保你的字体图标文件（如.ttf、.woff等）已经被正确添加到项目中，并且在pages.json或manifest.json中进行了正确的引用。

// pages.json 或 manifest.json 中引用自定义字体（示例）
"globalStyle": {
    "customFonts": [
        {
            "family": "my-icon-font",
            "source": "@/static/fonts/my-icon-font.ttf"
        }
    ]
}

2. 使用正确的字体图标类名

确保在页面中使用的字体图标类名与字体图标文件中定义的类名一致。例如，如果你的字体图标文件定义了一个类名为icon-home，则在页面中的使用方式应如下：

<view class="icon-home"></view>

同时，在页面的样式文件中，确保已经引入了字体图标样式：

@font-face {
    font-family: 'my-icon-font';
    src: url('@/static/fonts/my-icon-font.ttf');
}

.icon-home {
    font-family: 'my-icon-font';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    text-transform: none;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    /* 根据图标大小调整 */
    font-size: 24px;
}

3. 检查Android兼容性问题

有时候，Android设备可能因为字体文件或渲染引擎的问题导致字体图标显示不正确。可以尝试以下几种方法：

  • 确保字体文件支持所有目标Android版本。
  • 尝试使用不同的字体格式（如.woff2）。
  • 在Android设备上清除缓存或重新安装应用。

4. 使用Base64编码的字体

如果以上方法仍然无法解决问题，可以尝试将字体文件转换为Base64编码，并直接在CSS中引用：

@font-face {
    font-family: 'my-icon-font';
    src: url('data:application/x-font-ttf;charset=utf-8;base64,...') format('truetype');
}

注意：这里的...代表Base64编码后的字体文件内容。

通过以上方法，你应该能够解决uni-app导航栏中使用字体图标显示问题。如果问题仍然存在，请检查具体的设备和Android版本，可能需要针对特定情况进行调整。

回到顶部