QML 中的文本在不同平台上呈现不同 [英] Text in QML rendered different accross platforms

问题描述

我发现不同平台之间的文本呈现不一致:

左上角的图像是在android中生成的，如红色引导线所示，它与参考"窗口输出的斜体样式的垂直位置和角度不同.

矩形{宽度:100身高:50颜色:灰色"文本 {×:4是:2font.family:系统字体字体.像素大小:13宽度:内容宽度颜色:bgc文本:类型"}文本 {×:5是:13font.family:系统字体字体.像素大小:32字体.斜体:真字体.字母间距:-1宽度:内容宽度颜色:topc样式:Text.Sunken风格颜色:bgc文字:姓名"}}

任何想法是什么原因造成的?它是相同的字体，相同的代码.顶部填充和行高值在平台上是相同的.

解决方案

I am seeing inconsistencies in the rendering of text between different platforms:

The image on the top left is produced in android, and as the red guide lines indicate, it differs from the "reference" windows output in terms of vertical position and angle of the italic style.

Rectangle {
  width: 100
  height: 50
  color: "grey"
  Text {
    x: 4
    y: 2
    font.family: sysfont
    font.pixelSize: 13
    width: contentWidth
    color: bgc
    text: "Type"
  }
  Text {
    x: 5
    y: 13
    font.family: sysfont
    font.pixelSize: 32
    font.italic: true
    font.letterSpacing: -1
    width: contentWidth
    color: topc
    style: Text.Sunken
    styleColor: bgc
    text: "Name"
  }
}

Any ideas what causes that? It is the same font, the same code. Top padding and line height values are identical across the platforms.

解决方案

It turns out that it is a bug. So it will likely be fixed sometime in the years to come...

Until then, the following workaround should do the trick at least when it comes to the vertical position:

  property real offset: {
    switch (Qt.platform.os) {
    case "android": return androidValue
    case "windows": return windowsValue
    // and so on...
    }
  }

I will investigate if there are discrepancies between different version of the same platforms and update the answer if necessary.

UPDATE: It may turn out that the exception here is windows, as the output from android and ubuntu is practically identical (and yes, both are essentially linux anyway). I don't have a mac so I cannot give any input on that.

这篇关于QML 中的文本在不同平台上呈现不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！