Text in QML rendered different accross platforms

问题

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.

回答1:

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.

来源：https://stackoverflow.com/questions/39552072/text-in-qml-rendered-different-accross-platforms