uni-app 阿里自定义字体图标 安卓正常ios不显示问题

uni-app 阿里自定义字体图标 安卓正常ios不显示问题

信息类别 详细信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 11
HBuilderX类型 正式
HBuilderX版本号 4.57
手机系统 iOS
手机系统版本号 iOS 15
手机厂商 苹果
手机机型 全部
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

示例代码：

{
"path": "pages/gss/pro/index/inspection/xjy/inspectionExec/inspectPointList",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"app-plus": {
"titleNView": {
"titleText": "",  
"buttons": [{  
"type": "none",  
"text": "\ue660", //此处为图标在ttf文件中的标识  
"fontSrc": "/static/nfc/iconfont.ttf", //放置图标的ttf文件  
"color": "#DC9C34"  

}]  
}  
}  
}

操作步骤：

每次都可以复现

预期结果：

ios显示正常

实际结果：

ios显示不出字体图标

bug描述：

pages.json中配置titleNView，buttons，中自定义图片，从阿里字体图标下载的，但是现在有一个问题，安卓能显示，ios显示不了。但是ios还不是全部都显示不了，目前我整个pages.json里，有两个自定义图标，有一个是能显示的，另外一个显示不了，引用的是两个iconfont.ttf文件，换成一个，另外一个也是不显示

nfc.zip


更多关于uni-app 阿里自定义字体图标 安卓正常ios不显示问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

下面附件是ios和安卓显示的图片

更多关于uni-app 阿里自定义字体图标 安卓正常ios不显示问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


下面附件，为demo复现 点击界面1跳到界面2, 界面2的就不显示

感谢反馈，能够复现这个问题

这是一个常见的iOS字体图标显示问题，主要原因和解决方案如下：

  1. 字体文件格式问题：
  • iOS对TTF字体文件要求更严格，建议使用woff或woff2格式
  • 检查字体文件是否完整，可以尝试重新导出字体文件
  1. 路径问题：
  • iOS对静态资源路径处理与Android不同
  • 建议将字体文件放在static根目录下，使用绝对路径引用
  1. 字体加载时机：
  • iOS可能需要等待字体完全加载后才能显示
  • 可以尝试在App.vue中预加载字体文件
  1. 字体名称冲突：
  • 检查两个字体文件是否使用了相同的font-family名称
  • 确保每个字体文件有唯一的font-family名称
  1. 代码修改建议：
"buttons": [{
  "type": "none",
  "text": "\ue660",
  "fontSrc": "/static/iconfont.woff",
  "fontFamily": "iconfont-custom", // 确保唯一
  "color": "#DC9C34"
}]
回到顶部