QML Text组件用RichText设置Roboto Medium字体未生效,求助排查
看起来你遇到的问题是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

