QT、qml 使用矢量图标字体库iconfont时 在linux或者Android下会显示乱码

环境

硬件:通用PC / 手机 / Jetson Xavier NX 套件
系统:Ubuntu 20.4 / Android / Windows
软件 :QT5.12.9 + Qml
图标字体:阿里的矢量图标库

问题

​之前在Windows下时,使用阿里的iconfont.ttf没有任何问题。但是有次项目需要写一个Android端的app时,使用qml+iconfont的模式实现APP界面,结果在安卓端就出现图标全部显示异常(同样的代码在Windows端就不存在任何问题),所以将问题锁定在了图标字体库上。但是上次搞了很久都没有解决,最后被迫使用了svg显示图标,却一直耿耿于怀!!
这次,在linux下需要做界面开发,再次使用到iconfont,所有图标再次显示出错,我擦,这能忍?!

分析

前因

我开发QT程序,涉及界面开发时,我习惯性使用阿里的矢量图标库。使用方便、管理容易,能快速的开发出风格统一,较为美观的人机交互界面。
QT、qml 使用矢量图标字体库iconfont时 在linux或者Android下会显示乱码_第1张图片
做嵌入式开发,之所以选择QT,主要就是看中它跨平台的能力,图标库现在跨不了,这能忍?必须解决!

分析

解决

0、FontCreator下载

1、创建自己的字体库

我创建了一个属于自己的字体adimecoin-Regular.ttf,此字体库不同于从阿里的矢量图标库直接下载的ttf,可以在linux 或者 Android下使用不乱码 adimecoin-Regular.ttf下载
QT、qml 使用矢量图标字体库iconfont时 在linux或者Android下会显示乱码_第2张图片

2、加载字体库

//在main函数里,加入字体
QFontDatabase::addApplicationFont(QStringLiteral( ":/image/adimecoin-Regular.ttf"));

效果如下

3、qml使用字体库

//在QML里直接使用字体
        TabButton {
            font.pixelSize: APPSettings.smallButtonHeight
            font.family: "adimecoin"
            text: qsTr("\uF4DC数据")
        }

在Ubuntu,运行效果如下:
QT、qml 使用矢量图标字体库iconfont时 在linux或者Android下会显示乱码_第3张图片

参考:

1、在*ttf文件中添加字体图标
2、pkoretic/ionicons
3、Unable to use ttf icon font in QML

OK!
至此,问题解决。

你可能感兴趣的:(QT/QML,矢量图标库,Ubuntu,qt,前端)