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编码。

相关推荐
追烽少年x2 小时前
Qt中使用C++日志库
c++·qt
Hi202402178 小时前
Qt+Qml客户端和Python服务端的网络通信原型
开发语言·python·qt·ui·网络通信·qml
曦樂~17 小时前
【Qt】启动新窗口--C/S传输信息
开发语言·qt
源代码•宸17 小时前
Qt6 学习——一个Qt桌面应用程序
开发语言·c++·经验分享·qt·学习·软件构建·windeployqt
寻找华年的锦瑟17 小时前
Qt-UDP
开发语言·qt·udp
有时间要学习17 小时前
Qt——系统相关
qt
橘颂TA17 小时前
【QSS】软件界面的美工操作——Qt 界面优化
开发语言·qt·c/c++·界面设计
Elias不吃糖19 小时前
Qt TCP 网络通信详解(笔记)
笔记·qt·tcp/ip
B站计算机毕业设计之家20 小时前
深度学习:YOLOv8人体行为动作识别检测系统 行为识别检测识系统 act-dataset数据集 pyqt5 机器学习✅
人工智能·python·深度学习·qt·yolo·机器学习·计算机视觉
Predestination王瀞潞21 小时前
WEB前端技术基础(第三章:css-网页美化的衣装-上)
前端·css