FontForge 手工扩展 iconfont.ttf

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

1. 安装 FontForge

• Linux (Debian/Ubuntu):

  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";。

• 给新加的图标手动加一行，例如：

  .icon-new:before {
    content: "\e800";
  }

• 然后在 Qt QSS 或 HTML/CSS 里就可以使用这个新图标。

示例

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

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