1***@qq.com

发布：2025-12-19 12:09
更新：2025-12-19 14:19
阅读：25

【报Bug】小红书小程序引入iconfont 后，开发者工具生效，真机不生效问题

分类：uni-app

bug反馈

产品分类： uniapp/小程序/小红书

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： window10

HBuilderX类型：正式

HBuilderX版本号： 4.87

第三方开发者工具版本号： 2.8.1

基础库版本号： 3.135.0

项目创建方式： HBuilderX

示例代码：

@font-face {  
  font-family: "iconfont"; /* Project id 4730367 */  
  src: url('//at.alicdn.com/t/c/font_4730367_19mheilvlra.woff2?t=1764664620701') format('woff2'),  
       url('//at.alicdn.com/t/c/font_4730367_19mheilvlra.woff?t=1764664620701') format('woff'),  
       url('//at.alicdn.com/t/c/font_4730367_19mheilvlra.ttf?t=1764664620701') format('truetype');  
}  

.iconfont {  
  font-family: "iconfont" !important;  
  font-size: 16px;  
  font-style: normal;  
  -webkit-font-smoothing: antialiased;  
  -moz-osx-font-smoothing: grayscale;  
}  

.icon-clear:before {  
  content: "\e6b9";  
}

实际使用：

<icon class="clear-btn__icon iconfont icon-clear" />

操作步骤：

按以上描述的就能复现，开发者工具正常，真机预览就不展示了

预期结果：

真机上也能够正常展示 iconfont 图标

实际结果：

按以上描述的就能复现，开发者工具正常，真机预览就不展示了

bug描述：

同样的引入iconfont，在构建到微信小程序下正常，但是构建到小红书小程序后，发现在模拟器上是正常显示的，但是在真机上预览就没展示出来。

2025-12-19 12:09 负责人:无分享

2 个回复

Ask小助手

该bug反馈内容基本完整，标题明确指出了问题所在，描述清晰说明了在小红书小程序中iconfont在开发者工具正常但真机不显示的现象。代码示例完整可直接运行，包含@font-face定义和实际使用方式。复现步骤稍显简略但结合代码可操作，预期结果合理（真机应显示图标），实际结果描述准确。分类信息提供了操作系统和HBuilderX版本号(4.87)，有助于定位问题。

经分析，该bug很可能成立。小红书小程序对远程字体文件可能存在特殊限制，与微信小程序处理机制不同。知识库显示各小程序平台对CSS支持存在差异（如"百度小程序不支持属性选择器"、"支付宝小程序网络请求有严格规范"），且"小程序平台常见问题在开发者工具体现不出，需真机预览"。用户使用的远程字体链接(//at.alicdn.com)可能触发小红书的安全策略，导致真机无法加载外部字体资源。

建议解决方案：1) 将字体文件下载至本地项目再引入；2) 使用base64编码嵌入字体；3) 检查小红书小程序后台是否配置了合法域名。可参考小程序开发注意事项了解各平台差异。HBuilderX 4.87为正式版，建议先尝试升级至最新版排除已知问题。

内容为 AI 生成，仅供参考

1***@qq.com (作者) - 阿泽

已解决，iconfont上复制下来的没有带https:// 前缀，在有些平台上会有问题。加上 https:// 就好了。

@font-face {  
  font-family: "iconfont"; /* Project id 4730367 */  
  src: url('https://at.alicdn.com/t/c/font_4730367_19mheilvlra.woff2?t=1764664620701') format('woff2'),  
       url('https://at.alicdn.com/t/c/font_4730367_19mheilvlra.woff?t=1764664620701') format('woff'),  
       url('https://at.alicdn.com/t/c/font_4730367_19mheilvlra.ttf?t=1764664620701') format('truetype');  
}

2025-12-19 14:19 分享

要回复问题请先登录或注册

【报Bug】小红书小程序引入iconfont 后，开发者工具生效，真机不生效问题

操作步骤：

按以上描述的就能复现，开发者工具正常，真机预览就不展示了

预期结果：

真机上也能够正常展示 iconfont 图标

实际结果：

按以上描述的就能复现，开发者工具正常，真机预览就不展示了

bug描述：

2 个回复

公告

相关问题

【报Bug】小红书小程序 引入iconfont 后，开发者工具生效，真机不生效问题

操作步骤： 按以上描述的就能复现，开发者工具正常，真机预览就不展示了

预期结果： 真机上也能够正常展示 iconfont 图标

实际结果： 按以上描述的就能复现，开发者工具正常，真机预览就不展示了

bug描述：

与内容相关的链接

2 个回复

公告

相关问题

【报Bug】小红书小程序引入iconfont 后，开发者工具生效，真机不生效问题

操作步骤：

按以上描述的就能复现，开发者工具正常，真机预览就不展示了

预期结果：

真机上也能够正常展示 iconfont 图标

实际结果：

按以上描述的就能复现，开发者工具正常，真机预览就不展示了