You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

QML Text组件用RichText设置Roboto Medium字体未生效,求助排查

解决QML RichText中FontLoader加载的字体不生效问题

看起来你遇到的问题是FontLoader加载的Roboto Medium字体在RichText的span中没有被正确应用,反而字号变大了——这大概率是因为RichText无法直接识别你写的font-family: Roboto Medium,而是 fallback到了系统默认字体,同时你的字号设置生效了,所以看起来只有字号变大。

下面是具体的排查和解决方法:

1. 用FontLoader的name属性引用字体

当你用FontLoader加载自定义字体后,在QML富文本里不能直接写字体的显示名称(比如"Roboto Medium"),而是要使用FontLoader的name属性值。因为FontLoader会给加载的字体分配一个内部标识,RichText需要通过这个标识才能找到对应的字体。

举个完整的示例:

// 先定义FontLoader加载字体
FontLoader {
    id: robotoMedium
    source: "path/to/roboto-medium.ttf" // 替换成你的字体文件实际路径
}

// 再写Text组件
Text{ 
    id: test 
    textFormat: Text.RichText 
    color: "#297fca" 
    // 用${robotoMedium.name}引用加载好的字体
    text: `<span style='font-family: ${robotoMedium.name}; font-size: 15px'>Text in one font.</span> And in another`
    anchors{ 
        top: description.bottom 
        topMargin: 40 
        left: headDesign.right 
        leftMargin: 75 
    } 
}

2. 确认字体的内部名称(可选)

如果上面的方法还是不生效,可能是你写的"Roboto Medium"并不是字体文件的内部字体系列名称。有些字体的文件名和内部名称不一致,你可以通过以下方式确认:

  • Windows:右键字体文件→属性→详细信息→“字体名称”
  • macOS:打开字体文件,查看顶部显示的正式名称

比如Roboto Medium的内部字体系列名称可能是"Roboto",字重为500,这时候可以在style里补充字重设置:

<span style='font-family: ${robotoMedium.name}; font-weight: 500; font-size: 15px'>Text in one font.</span>

3. 确保字体加载完成后再渲染

FontLoader是异步加载的,如果Text组件在字体加载完成前就渲染,也会导致字体不生效。可以监听FontLoader的status属性,等字体加载完成后再显示Text:

FontLoader {
    id: robotoMedium
    source: "path/to/roboto-medium.ttf"
    onStatusChanged: {
        if (status === FontLoader.Ready) {
            test.visible = true;
        }
    }
}

Text{ 
    id: test 
    visible: false // 默认隐藏,等字体加载完成再显示
    textFormat: Text.RichText 
    color: "#297fca" 
    text: `<span style='font-family: ${robotoMedium.name}; font-size: 15px'>Text in one font.</span> And in another`
    anchors{ 
        top: description.bottom 
        topMargin: 40 
        left: headDesign.right 
        leftMargin: 75 
    } 
}

为什么原代码会只显示字号变大?

因为RichText无法识别你指定的"Roboto Medium"字体,所以会自动使用系统默认的替代字体,而你设置的font-size:15px是生效的,所以看起来只有字号变化,字体却没切换成功。

内容的提问来源于stack exchange,提问作者aarelovich

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.29 06:55:50