Qt for WebAssembly中文显示异常

Qt for WebAssembly中文显示异常是因为没有添加中文字体，本文介绍解决该问题。

1.添加字体资源文件

在C:\Windows\Fonts目录下面找一种中文字体（本文以SIMYOU.TTF）举例，把SIMYOU.TTF添加到qrc资源文件里面，如图

2.设置字体

在main.cpp中设置字体

int fontId = QFontDatabase::addApplicationFont(QStringLiteral(":/qml/font/SIMYOU.TTF"));
QStringList fontFamilies = QFontDatabase::applicationFontFamilies(fontId);
qDebug()<<"fontfamilies:"<<fontFamilies;
if (fontFamilies.size() > 0)
{
    QFont font;
    font.setFamily(fontFamilies[0]);//设置全局字体
    app.setFont(font);
}

3.完整main函数

#include <QApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include "CDataclass/cdataclass.h"
#include "Common/ccommon.h"
#include "TableModel/logtablemodel.h"
#include "TableModel/usertablemodel.h"
#include "TableModel/menutreemodel.h"
#include <QFontDatabase>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QApplication app(argc, argv);
    qmlRegisterType<CDataClass>("dataclass", 1, 0, "CDataClass"); // 注册类，Q_INVOKABLE方式调用c++里面函数
    qmlRegisterType<MenuTreeModel>("MenuTreeModel", 0, 1, "MenuTreeModel");
    qmlRegisterType<UserTableModel>("UserTableModel", 0, 1, "UserTableModel");
    qmlRegisterType<LogTableModel>("LogTableModel", 0, 1, "LogTableModel");
    qmlRegisterType<MyTreeModel>("MyTreeModel", 0, 1, "MyTreeModel");

    MyCommon::instance(); //初始化单例类
    
	// 设置全局字体，用于解决Qt for WebAssembly中文显示异常
    int fontId = QFontDatabase::addApplicationFont(QStringLiteral(":/qml/font/SIMYOU.TTF"));
    QStringList fontFamilies = QFontDatabase::applicationFontFamilies(fontId);
    qDebug()<<"fontfamilies:"<<fontFamilies;
    if (fontFamilies.size() > 0)
    {
        QFont font;
        font.setFamily(fontFamilies[0]);//设置全局字体
        app.setFont(font);
    }

    QQmlApplicationEngine engine;
    CDataClass dataClass;
    engine.rootContext()->setContextProperty("datacls", &dataClass); // 设置属性，接收c++对象信号

    engine.load(QUrl(QStringLiteral("qrc:/qml/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}