QML RichText有序列表使用Inter字体时对齐异常求助

使用Qt的Text.RichText渲染包含HTML有序列表的文本时，发现Inter字体下列表项的编号（如1.、2.）无法与内容居中对齐，但切换到其他字体（如Times）时显示正常。以下是复现代码及效果对比，附可行解决方案：

复现代码 #

C++ 初始化代码 #

#include <QQuickView>
#include <QFontDatabase>

void InstallDefaultFont()
{
    qint32 fontId = QFontDatabase::addApplicationFont(":/Inter-Light.ttf");
    QStringList fontList = QFontDatabase::applicationFontFamilies(fontId);
    QString family = fontList.first();
    QGuiApplication::setFont(QFont(family));
}

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);
    InstallDefaultFont();

    QQuickView view;
    view.resize(QSize(600, 600));
    QQmlContext *context = view.engine()->rootContext();
    view.setSource(QUrl("qrc:/main.qml"));
    view.show();
    return app.exec();
}

QML 界面代码 #

import QtQuick 2.0
import QtQuick.Controls 2.0

Item {
    width: 900
    height: 900

    Label {
        text: "<b>Title</b><br><ol><li>Step #1</li><li>Step #2: list number doesn't align in center</li></ol>"
        anchors.fill: parent
        anchors.margins: 50
        wrapMode: Text.WordWrap
        font.pixelSize: 48
        textFormat: Text.RichText
        font.weight: Font.Medium
        //font.family: "Times"
    }
}

效果对比 #

• 使用Inter-Light.ttf：列表编号与内容无法居中对齐
• 使用其他字体（如Times）：编号与内容居中显示正常

解决方案 #

1. 替换完整Inter字体包 #

问题可能源于仅引入了Inter的Light字重，部分字形度量缺失。尝试引入包含全字重的Inter字体文件，确保字体的基线、对齐等度量数据完整。

2. 自定义列表布局（彻底规避RichText渲染问题） #

放弃HTML <ol>标签，改用QML原生组件手动实现列表，完全控制编号的对齐方式：

import QtQuick 2.0
import QtQuick.Controls 2.0

Item {
    width: 900
    height: 900

    Label {
        id: titleLabel
        text: "<b>Title</b>"
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.margins: 50
        font.pixelSize: 48
        font.weight: Font.Medium
    }

    Column {
        anchors.top: titleLabel.bottom
        anchors.topMargin: 10
        anchors.left: parent.left
        anchors.margins: 50
        spacing: 15
        width: parent.width - 100

        Row {
            spacing: 10
            Text {
                text: "1."
                font.pixelSize: 48
                font.weight: Font.Medium
                horizontalAlignment: Text.AlignRight
                width: 60 // 固定编号宽度，确保对齐
            }
            Text {
                text: "Step #1"
                font.pixelSize: 48
                font.weight: Font.Medium
                wrapMode: Text.WordWrap
                width: parent.width - 70
            }
        }

        Row {
            spacing: 10
            Text {
                text: "2."
                font.pixelSize: 48
                font.weight: Font.Medium
                horizontalAlignment: Text.AlignRight
                width: 60
            }
            Text {
                text: "Step #2: list number aligns correctly now"
                font.pixelSize: 48
                font.weight: Font.Medium
                wrapMode: Text.WordWrap
                width: parent.width - 70
            }
        }
    }
}

3. 调整字体渲染参数 #

尝试通过调整QFont的基线偏移或字距，修正Inter字体的对齐偏差：

void InstallDefaultFont()
{
    qint32 fontId = QFontDatabase::addApplicationFont(":/Inter-Light.ttf");
    QStringList fontList = QFontDatabase::applicationFontFamilies(fontId);
    QString family = fontList.first();
    QFont font(family);
    font.setPixelSize(48);
    font.setWeight(QFont::Medium);
    // 根据实际情况微调基线偏移值
    font.setBaselineOffset(font.baselineOffset() + 2);
    QGuiApplication::setFont(font);
}

4. 升级Qt版本 #

旧版本Qt的RichText渲染引擎可能存在特定字体的兼容性bug，升级到最新LTS版本（如Qt 6.x系列）可修复部分底层渲染问题。

内容的提问来源于stack exchange，提问作者user2246120