字体图标的使用¶

本文主要记录在桌面客户端软件（QT）中使用字体图标的方法。

字体图标是一种将图标作为字体文件来使用的技术，它通过使用字体库中的字符来显示图形，类似于文本字符。相比传统图标，字体图标具有可缩放、易于样式修改（如改变颜色、大小）等优点。

1 获取¶

几个常用的字体图标库
- Google Material Symbols 由 Google 设计，包含超过 2,500 个图标，提供多种设计变体，适用于 Web、Android 和 iOS 项目。
- Iconfont 由阿里巴巴推出的矢量图标库，提供丰富的图标资源，方便开发者和设计师在项目中使用。
- fontawesome 一套广泛使用的图标字体库，包含多种风格的图标，适用于网页和应用程序的设计。

2 使用(QT)¶

加载字体

int fontId = QFontDatabase::addApplicationFont("./theme/s-MaterialSymbolsRounded.otf");
QStringList fontFamilies = QFontDatabase::applicationFontFamilies(fontId);
for (const auto & family : fontFamilies) {
    qInfo() << "Font family: " << family;
}

控件设置字体

// 样式表
QWidget[Icon="defaultIcon"] {
    font-family: "Material Symbols Rounded";
}

// 直接指定字体
QLabel *lab = new QLabel;
lab->setAlignment(Qt::AlignCenter);
lab->setFont("Material Symbols Rounded");

获取想要图标的 Code point

在下载图标的网站上可以找到每个图标对应的 Unicode 编码

根据图标编码设定图标

enum class IconType
{
    AttachFile = 0xe226,
}

QChar GetIconChar(const IconType & name)
{
    return QChar((unsigned short)name);
}

lab->setText(StyleUtil::GetIconChar(IconType::AttachFile));

3 简化字体文件¶

软件加载字体后会把所有字体都在内存中展开，占用较多内存。可以通过裁剪字体的方式降低内存占用。有很多在线/本地工具可以实现。

4 制作字体文件¶

某些情况下，通过字体图标来调用会比纯图标调用方便。可以用一些工具将需要用到的图标文件打包成字体。

icomoon.io