rich-text 在uni-app nvue下设置字体字号不生效

rich-text 在uni-app nvue下设置字体字号不生效

| 开发环境 | 版本号 | 项目创建方式 |
|----------|--------|--------------|
| Windows  | win10  | HBuilderX     |

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.87

手机系统：Android

手机系统版本号：Android 16

手机厂商：小米

手机机型：14

页面类型：vue

vue版本：vue2

打包方式：云端

示例代码：


<rich-text :nodes="contentNode"></rich-text>  

const contentNode = computed(() => {  
    return [{  
        name: 'div',  
        attrs: {  
            class: 'div-class',  
            style: ''  
        },  
        children: [{  
            name: "span",  
            attrs: {  
                style: "color:#F0DB8A;font-size:12px;line-height:28px;",  
            },  
            children: [{  
                type: 'text',  
                text: `名称`,  
            }]  
        }, {  
            name: "span",  
            attrs: {  
                style: "color:#ffffff;font-size:12px;line-height:28px;",  
            },  
            children: [{  
                type: 'text',  
                text: `内容`,  
            }]  
        }]  
    }]  
})

操作步骤：

  • 正常运行

预期结果：

  • 正常显示设置的文字大小

实际结果：

  • 文字大小设置无效

bug描述：

  • rich-text 在nvue下设置字体字号不生效

更多关于rich-text 在uni-app nvue下设置字体字号不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

好好好这么搞4.87 是最新版说是旧版本，不是这是富文本组件啊，文字大小不兼容说的过去吗，我想到兼容差也没想到差到这种地步

更多关于rich-text 在uni-app nvue下设置字体字号不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


该bug反馈内容基本完整但存在不足。BUG描述清晰说明了rich-text在nvue下字体字号不生效的问题，代码示例完整可直接运行，分类信息详尽包含HBuilderX 4.87、Android 16等关键环境信息。但复现步骤过于简略（仅"正常运行"），应补充具体操作流程如"创建nvue页面并加载示例代码"。预期结果合理，实际结果描述准确。
经核查知识库，该bug成立。依据包括：

nvue CSS限制文档明确说明"只有text标签可以设置字体大小，字体颜色"，而rich-text组件在nvue环境下对span标签的样式处理存在兼容性问题
知识库指出"如果使用组件编译时会被转换为<text>"，但转换过程中内联样式可能未被正确解析
HBuilderX 4.87版本较旧（当前最新版已更新），可能存在已修复的样式解析问题

建议解决方案：

升级HBuilderX至最新正式版
尝试将span替换为text标签直接设置样式
参考rich-text组件文档的注意事项，确认nvue下样式作用域限制
考虑使用text组件替代rich-text实现简单文本展示，或采用parse插件处理复杂HTML内容 内容为 AI 生成，仅供参考

在 uni-app 的 nvue 页面中，rich-text 组件渲染的是原生视图，其样式支持与 vue 页面有所不同。根据你提供的代码，字体大小设置无效的问题通常是由于 nvue 环境下 rich-text 对 CSS 样式的支持限制导致的。

原因分析：

  1. nvue 的 rich-text 组件基于原生渲染，仅支持部分 CSS 样式，且样式写法需符合原生规范。
  2. 在 Android 平台，字体大小可能需要使用 dp 单位而非 px。nvue 中默认以 px 为单位，但部分属性在 rich-text 中可能需要显式单位或使用 dp。
  3. 样式属性需直接写在节点的 attrs.style 中，且需确保格式正确。

解决方案： 修改 style 字符串中的 font-size 值，尝试添加 dp 单位或使用数字值。例如：

style: "color:#F0DB8A;font-size:12dp;line-height:28dp;"

或仅使用数字（部分版本支持）：

style: "color:#F0DB8A;font-size:12;line-height:28;"

完整调整示例：

const contentNode = computed(() => {  
    return [{  
        name: 'div',  
        attrs: {  
            class: 'div-class',  
            style: ''  
        },  
        children: [{  
            name: "span",  
            attrs: {  
                style: "color:#F0DB8A;font-size:12dp;line-height:28dp;",  
            },  
            children: [{  
                type: 'text',  
                text: `名称`,  
            }]  
        }, {  
            name: "span",  
            attrs: {  
                style: "color:#ffffff;font-size:12dp;line-height:28dp;",  
            },  
            children: [{  
                type: 'text',  
                text: `内容`,  
            }]  
        }]  
    }]  
})
回到顶部