Qml Qt Quick Control 2: Scale font size without binding loop

Question

I want to scale the font size of a Label like this:

Label {
    font.size: font.size*0.8
}

Of course this creates a binding loop. Is there a way to do this without creating a hidden Label element?

Label {
    id: hiddenLabel
}

Label {
    font.size: hiddenLabel.font.size*0.8
}

Scaling the whole label is not optimal because the text quality decreases:

Label {
    scale: 0.8
}

Regards,

Answer 1

In addition to the other options already mentioned, there's also Qt.application.font:

Label {
    font.pixelSize: Qt.application.font.pixelSize * 0.8
}

This read-only property holds the default application font as returned by QGuiApplication::font().

The commit message for the change mentions other options that were considered at the time:

• "<h3>Large text</h3>" - adds extra space below the text since it's a HTML element, so not really useful if you want a decent layout.
• Hard-coding a pixel size. Works OK when used in combination with Qt::AA_EnableHighDpiScaling, and so long as you guess the correct size that works for each device/display you're targeting. Doesn't work without setting Qt::AA_EnableHighDpiScaling.
• Using FontMetrics/TextMetrics. Works fine, but is a bit verbose.
• Use an empty Text element. Creates an unnecessary item. Was superseded by FontMetrics/TextMetrics.
• defaultPixelSize/implicitPixelSize and defaultPointSize/implicitPointSize. There are already font-related properties outside of the font grouped property, so this wouldn't be out of place, but the API is already quite large.

If you really need to base the font size on the particular control that you're using, the only guaranteed way is to create an "empty"/"default-constructed" instance of that control:

Button {
    id: dummyButton
}

Button {
    font.pixelSize: dummyButton.font.pixelSize * 0.8
}

This is because each style has different font sizes for different types of controls. See the Material style's theme code, for example.