【报Bug】"nvueStyleCompiler": "uni-app"编译模式下iconfont显示异常

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Windows

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

HBuilderX类型：正式

HBuilderX版本号： 4.08

手机系统： Android

手机系统版本号： Android 10

手机厂商： realme

手机机型： neo5se

页面类型： nvue

vue版本： vue2

打包方式：云端

项目创建方式： HBuilderX

示例代码：

js
const domModule = uni.requireNativePlugin('dom');
domModule.addRule('fontFace', {
fontFamily: 'jgj-iconfont',
src:"url('https://at.alicdn.com/t/c/font_1153018_at9*********.ttf')"
});
css
.jgj-iconfont {
font-family: jgj-iconfont;
}

操作步骤：

使用自己的图标库和uview的uicon都显示异常

预期结果：

显示正常图标

实际结果：

图标显示的X

bug描述：

nvue页面在使用"nvueStyleCompiler": "uni-app"编译的情况下，用nvue的引入字体图标方式，字体无法正常显示，去掉这种变异模式就能正常显示

2024-04-18 16:18 负责人:无分享

1 个回复

DCloud_UNI_Anne

可以用文档示例测试看下是否正常 https://uniapp.dcloud.net.cn/tutorial/nvue-api.html#addrule

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

【报Bug】"nvueStyleCompiler": "uni-app"编译模式下iconfont显示异常

示例代码：

js
const domModule = uni.requireNativePlugin('dom');
domModule.addRule('fontFace', {
fontFamily: 'jgj-iconfont',
src:"url('https://at.alicdn.com/t/c/font_1153018_at9*********.ttf')"
});
css
.jgj-iconfont {
font-family: jgj-iconfont;
}

操作步骤：

使用自己的图标库和uview的uicon都显示异常

预期结果：

显示正常图标

实际结果：

图标显示的X

bug描述：

1 个回复

公告

相关问题

【报Bug】"nvueStyleCompiler": "uni-app"编译模式下iconfont显示异常

示例代码： js const domModule = uni.requireNativePlugin('dom'); domModule.addRule('fontFace', { fontFamily: 'jgj-iconfont', src:"url('https://at.alicdn.com/t/c/font_1153018_at9*****.ttf')" }); css .jgj-iconfont { font-family: jgj-iconfont; }

操作步骤： 使用自己的图标库和uview的uicon都显示异常

预期结果： 显示正常图标

实际结果： 图标显示的X

bug描述：

与内容相关的链接

1 个回复

公告

相关问题

示例代码：

js
const domModule = uni.requireNativePlugin('dom');
domModule.addRule('fontFace', {
fontFamily: 'jgj-iconfont',
src:"url('https://at.alicdn.com/t/c/font_1153018_at9*********.ttf')"
});
css
.jgj-iconfont {
font-family: jgj-iconfont;
}

操作步骤：

使用自己的图标库和uview的uicon都显示异常

预期结果：

显示正常图标

实际结果：

图标显示的X