字体构建器

用已转为轮廓的 SVG 图形构建单色或彩色图标字体和网页字体，或在基于 TrueType 的静态源字体中添加和替换字形。

Font Builder 旨在用规范的矢量图形可靠地制作字体。对于不支持的 SVG 和字体特性，它会拒绝处理，而不是悄悄修改。

用 SVG 构建新字体

如果已有图标图形，并希望以字体形式发布，请使用以下流程。

1. 打开 Font Builder。
2. 将已转为轮廓的 SVG 文件拖入字形列表。
3. 检查字形名称和 Unicode 值。
4. 运行 Preflight Check。
5. 导出 TTF、WOFF、WOFF2，或包含 CSS、演示 HTML 和 metadata.json 的完整网页字体包。

在源字体中添加或替换字形

Font Builder 可以导入基于 TrueType 的静态源字体。

• 向源字体添加 SVG 字形。
• 用 SVG 图形替换现有 Unicode 字形。
• 使用 Browse Glyphs 从源字体中选择替换目标。
• 编辑源字体时保持被替换字形的 ID 稳定。
• 如果需要稍后继续，将工作保存为 .webfontproject。

SVG 要求

Font Builder 要求使用已转为轮廓的静态 SVG 图形。

导入之前，应将图形效果展平。不支持的输入包括可编辑 SVG 文字、位图、滤镜、蒙版、裁剪路径、脚本、动画、视频、音频、iframe 和外部资源。

SVG 模板

绘制图标之前，请先导出 SVG 模板。模板包含基线和边界参考线，便于在导入前让图标与字体度量对齐。

彩色字体

Font Builder 可以用轮廓 SVG 图形构建彩色字体。彩色模式会通过 COLR/CPAL 保留受支持的纯色填充、描边、线性／径向渐变和透明度，为受支持的渐变／效果字形提供 SVG 回退，并让 currentColor 跟随文字颜色。额外调色板可以标记为适用于浅色或深色背景。

使用 Import Font… 可将受支持的 COLR/SVG 字形作为矢量素材导入。不支持的彩色效果或仅有位图的字形可能以单色轮廓导入，并显示提示。

网页字体包输出

网页字体包可包含：

• 字体文件。
• 包含 @font-face 的 CSS。
• 演示 HTML。
• 元数据。
• 字形预览。
• 用于图标字体的 HTML 片段。

最佳实践

• 图标字体使用 Unicode 私用区的值，除非明确需要标准 Unicode 映射。
• 保持图标 SVG 在视觉上居中，并对齐到相同画布。
• 每次导出之前都运行预检。
• 发布正式字体之前修复红色行中的问题。