FontForge Python模块添加SVG字符失败及彩色SVG添加咨询

一、盾牌字符无法显示的问题修复 #

你的代码存在几个关键问题，导致字符无法正常生成并被识别：

1. 移除多余的GSUB替换逻辑 #

你添加的gsub_single查找表用于字形替换，但这里只是直接添加独立字符，不需要该逻辑，反而会干扰字符映射。删除以下代码：

font.addLookup('shield', 'gsub_single', (), (("liga", (("DFLT", ("dflt")),)),))
font.addLookupSubtable('shield', 'shield')
font[128737].addPosSub('shield', "128737")

2. 调整SVG字形的对齐与尺寸 #

SVG导入后需匹配原字体的em大小、基线和字符宽度，否则会出现位置偏移或无法显示的情况。添加以下代码：

# 对齐原字体的字符宽度与边距
shield.width = font['a'].width
shield.left_side_bearing = font['a'].left_side_bearing
shield.right_side_bearing = font['a'].right_side_bearing
# 调整基线位置，确保字形在基线以上
bbox = shield.boundingBox()
shield.transform([1, 0, 0, 1, 0, font.em - bbox[3]])

3. 清理重复的字体元数据 #

你重复添加了Preferred Family等字段，会导致字体元数据混乱，保留一份即可：

# 保留核心元数据，删除重复条目
font.appendSFNTName('English (US)', 'SubFamily', "SemiBold Italic")
font.appendSFNTName('English (US)', 'Fullname', "FiraCodeEmojii SemiBold Italic")
font.appendSFNTName('English (US)', 'Preferred Family', "FiraCodeEmojii")
font.appendSFNTName('English (US)', 'Preferred Styles', "SemiBold Italic")
font.appendSFNTName('English (US)', 'Compatible Full', "FiraCodeEmojii SemiBold Italic")
font.appendSFNTName('English (US)', 'WWS Family', "FiraCodeEmojii")
font.appendSFNTName('English (US)', 'WWS Subfamily', "SemiBold Italic")

4. 正确生成字体 #

生成时指定OpenType标志，确保Unicode映射生效：

font.reencode('unicode')
font.generate('testfont.ttf', flags=('opentype'))

修复后的完整代码：

import fontforge

font = fontforge.open('firacode.ttf')
# 创建Unicode码点U+1F6E1对应的字符
shield = font.createChar(128737)
shield.importOutlines('shield.svg')

# 调整字形匹配原字体
shield.width = font['a'].width
shield.left_side_bearing = font['a'].left_side_bearing
shield.right_side_bearing = font['a'].right_side_bearing
bbox = shield.boundingBox()
shield.transform([1, 0, 0, 1, 0, font.em - bbox[3]])

# 设置字体元数据
font.fullname = 'FiraCodeEmojii'
font.familyname = 'FiraCodeEmojii'
font.fontname = 'FiraCodeEmojii'
font.uniqueid = 123456789
font.xuid = '123456789'

font.appendSFNTName('English (US)', 'SubFamily', "SemiBold Italic")
font.appendSFNTName('English (US)', 'Fullname', "FiraCodeEmojii SemiBold Italic")
font.appendSFNTName('English (US)', 'Preferred Family', "FiraCodeEmojii")
font.appendSFNTName('English (US)', 'Preferred Styles', "SemiBold Italic")
font.appendSFNTName('English (US)', 'Compatible Full', "FiraCodeEmojii SemiBold Italic")
font.appendSFNTName('English (US)', 'WWS Family', "FiraCodeEmojii")
font.appendSFNTName('English (US)', 'WWS Subfamily', "SemiBold Italic")
font.appendSFNTName('English (US)', 'Sample Text', "FiraCodeEmojii")
font.appendSFNTName('English (US)', 'Trademark', "FiraCodeEmojii")
font.appendSFNTName('English (US)', 'Manufacturer', "FiraCodeEmojii")
font.appendSFNTName('English (US)', 'Designer', "FiraCodeEmojii")
font.appendSFNTName('English (US)', 'Vendor URL', "FiraCodeEmojii")
font.appendSFNTName('English (US)', 'Designer URL', "FiraCodeEmojii")
font.appendSFNTName('English (US)', 'License', "FiraCodeEmojii")
font.appendSFNTName('English (US)', 'License URL', "FiraCodeEmojii")
font.appendSFNTName('English (US)', 'UniqueID', "FiraCodeEmojii")

font.reencode('unicode')
font.generate('testfont.ttf', flags=('opentype'))

二、添加带颜色的SVG字符 #

普通TTF不支持彩色，需生成**SVG-in-OT（OpenType SVG）**字体，步骤如下：

1. 准备彩色SVG文件 #

确保SVG包含fill、stroke等颜色属性，且viewBox匹配字体em大小（比如viewBox="0 0 1000 1000"）。

2. 修改代码启用SVG支持 #

导入SVG后，关联彩色SVG内容并启用SVG表：

# 导入彩色SVG
shield.importOutlines('shield-color.svg')
# 启用SVG表
font.sfnt_names.append(('English (US)', 'SVG', '1'))
# 将SVG内容绑定到字形
shield.setSvgOutline(open('shield-color.svg').read())

3. 生成彩色字体 #

生成时指定svg标志：

font.generate('testfont-color.ttf', flags=('opentype', 'svg'))

注意事项 #

• 并非所有软件都支持SVG-in-OT字体，现代浏览器、macOS/iOS应用、新版Windows Office等可正常显示，老旧软件可能仅显示单色轮廓。
• 测试字符时，可通过字符映射工具直接输入Unicode码点U+1F6E1查找。

内容的提问来源于stack exchange，提问作者Bussiere