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,主要就是看中它跨平台的能力,图标库现在跨不了,这能忍?必须解决!

分析

解决

0、FontCreator下载

1、创建自己的字体库

我创建了一个属于自己的字体adimecoin-Regular.ttf,此字体库不同于从阿里的矢量图标库直接下载的ttf,可以在linux 或者 Android下使用不乱码 adimecoin-Regular.ttf下载
在这里插入图片描述

2、加载字体库

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

效果如下

3、qml使用字体库

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

在Ubuntu,运行效果如下:
在这里插入图片描述

参考:

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

OK!
至此,问题解决。

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值