使用 IcoMoon App 将设计软件导出的 SVG 图标打包生成 Web Font（图标字体）时，不少设计师常遇到某些带有文本轮廓或复合路径的图标在导出后边缘严重变形、镂空闭合或笔画错位。本文剖析 SVG 字体渲染机制并提供修复步骤。
一、 核心根因：未转曲与非标准网格对齐
- 文本未转为纯路径（Convert to Outlines）： SVG 内部如果残留
<text>标签，IcoMoon 会因缺失本地字体文件而强制调用系统字体替代，导致笔画变形； - 路径未合并/存在未闭合线段： 描边（Stroke）没有轮廓化，或多个重叠形状没有使用布尔运算合并；
- 网格精度与基准线不匹配： IcoMoon 默认采用 16×16、32×32 或 1024 像素网格，非整数坐标会导致采样畸变。
二、 标准修复工作流（以 Illustrator / Figma 为例）
- 文字转曲与轮廓化描边： 选中所有文字按
Ctrl + Shift + O转曲，并执行对象 -> 路径 -> 轮廓化描边； - 路径联集合并： 打开路径查找器，将所有图层形状点击「联集 (Unite)」合并为单一复合路径；
- 导出优化： 导出 SVG 时，设置精度为 3位小数，并勾选“转换为路径”；
- 重新上传 IcoMoon： 在 IcoMoon 中开启 Auto-Center 与 Fix Orientation，重新生成的字体即可完美平滑呈现！