FontForge 手工扩展 iconfont.ttf

📝 使用 FontForge 扩展添加图标到 iconfont.ttf

1. 安装 FontForge

  • Linux (Debian/Ubuntu):

    bash 复制代码
    sudo apt install fontforge
  • Windows/Mac:

    从官网 https://fontforge.org/ 下载对应版本安装。


2. 打开已有的 iconfont.ttf

  1. 启动 FontForge。
  2. 菜单:File → Open ,选择你的 iconfont.ttf
  3. 界面会显示一个「字形表」(Glyphs),每个格子对应一个字符(Unicode 编码)。

3. 找到空白的字形槽位

  • 现有的 iconfont 通常从 0xE600 开始分配编码。

  • 你可以用快捷键:

    • Ctrl+F → 输入编码范围,例如 E600,快速跳转。
  • 找到一个 空白的格子,作为新图标的插槽。


4. 导入新的 SVG 图标

  1. 用鼠标双击一个空白格子,进入字形编辑窗口。
  2. 菜单:File → Import
  3. 选择你的图标文件(推荐用 SVG 格式)。
  4. 图标会被导入到坐标系里(通常在 em = 1000 的范围内)。

5. 调整大小和位置

  • 在编辑窗口,用鼠标或工具栏调整图标:

    • Ctrl+A 全选路径。
    • Element → Transform → Scale → 缩放到合适大小(通常高度在 900 左右,保持居中)。
    • Element → Transform → Translate → 移动到基线位置(大约在 y=0 附近)。
  • 确保图标在主方框内,不要超出边界。


6. 设置编码(Unicode)

  1. 关闭字形编辑窗口,回到字形表。

  2. 选中刚刚导入的图标 → 右键 → Glyph Info

  3. Unicode Code Point 中输入一个空闲的编码,例如 E800

    • 注意避免和已有的冲突。
    • 一般 iconfont 都用私有区 (PUA) E600--EFFF

7. 生成新字体

  1. 菜单:File → Generate Fonts
  2. 选择 TrueType (.ttf)
  3. 建议保存为一个新的文件,比如 iconfont_new.ttf,避免覆盖原始文件。
  4. 如果弹出字体验证提示,可以忽略小问题,直接点击 "Generate"。

8. 更新 CSS/映射文件(Qt应用可直接使用导出的ttf文件无css文件)

  • iconfont.css 里每个图标都有对应的 content: "\e600";

  • 给新加的图标手动加一行,例如:

    css 复制代码
    .icon-new:before {
      content: "\e800";
    }
  • 然后在 Qt QSS 或 HTML/CSS 里就可以使用这个新图标。

示例

复制代码
ui->btnControl->setText(QChar(0xE60c));
ui->btnControl->setToolTip("控制");

0xE60c 即为新增图标对应的unicode编码。

相关推荐
金色熊族4 小时前
ubuntu20.04编译qt源码5.15.3
linux·c++·qt
β添砖java5 小时前
CSS网格布局
前端·css·html
看着捉急9 小时前
x86_64 centos7.2 上用aarch64-linux-gnu-gcc4.8.5交叉编译qt5.11.3
linux·运维·qt
行者..................10 小时前
petalinux 安装Openblass库
qt
掘根1 天前
【Qt】布局管理器
开发语言·qt
EveryPossible1 天前
带有渐变光晕
前端·javascript·css
qianmo20211 天前
基于any2web+deepseek实现对三角函数定义的理解
css·html·css3
得鹿梦鱼、2 天前
QT示例 使用QTcpSocket和QTcpServer类实现TCP的自定义消息头、消息体通信示例
qt·qtcpsocket·qtcpserver·二进制协议通信·pimpl模式
zhangxuyu11182 天前
flex布局学习记录
前端·css·学习
茉莉玫瑰花茶2 天前
Qt 界面优化 --- 绘图
开发语言·数据库·qt