QML学习十九：ttf字体库使用

news2025/4/6 1:33:41

一、前言

在使用QML时，常常自定义按钮，按钮上有显示个图标，其实，那不是图标，是文本，如何显示？

本篇记录，如何导入阿里巴巴字体库，并调用显示。

二、阿里巴巴字体库下载

1、字地库地址

阿里巴巴字体库地址

2、选择库

多色图标库，或都其他库

3、添加入库

加完之后点击购物车，可以看到所有我们选择的图标，点击添加至项目，没有项目的新建一个就行（点击下载代码或者素材会导致材料不全）

4、下载

下载后，里面有个tft文件，就是QML所需要用到的文件。

注：可以添加多个到同一库里。

三、查看字体库文件

查看库文件推荐IcoMoon，这个网站的作用就是查看你的ttf文件中有那些具体的图标或者文字。

1、打开网址Convert SVG Icons to Export as Icon Font, SVG, PNG, PDF, Sprite, etc. ❍ IcoMoon App导入字体库

2、导入成功后会在这个页面多一个你字体库名字的选项，如下：

3、查看你需要的图片的编码

先选中图标，在点击Cenerate Font就可以看到编码e950

四、QML加载文字库

1、QT导入文字库

在qrc里添加下载的ttf文件

2、载入ttf

3、引用

其中，值得注意的是font.family: “iconfont" ，"iconfont"为当前字体库的名字，需要自行确定库名，才能调用。

五、源码

1、main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QFontDatabase>
 
int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
 
    QGuiApplication app(argc, argv);
 
    QQmlApplicationEngine engine;
 
    QFontDatabase::addApplicationFont(QLatin1String(":/fonts/iconfont.ttf"));
 
    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);
 
    return app.exec();
}

2、main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
 
import QtQuick.Controls 2.12
 
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
 
    Button {
        id: button
        width: 100
        height: 50
        x: 100
        y: 100
        font.family:  "iconfont"
        text: "\ue60b"
    }
}

ttf文件需要导入。