如何在SVG中嵌入本地字体？Inkscape Logo字体兼容问题排查

算力阿峰

2026-5-19

我懂你这种头疼的情况——用本地装的字体做了个Logo，结果换台没装这字体的电脑就显示得乱七八糟，想嵌入字体还失败了，哪怕试了<defs>标签也没用。别慌，我给你几个实测有效的解决办法：

方法1：用Inkscape自带功能嵌入字体（最省心）

这是最不容易出错的方式，不用手动改代码：

打开你的SVG文件，选中所有使用自定义字体的文本元素
点击顶部菜单栏的「文件」→「另存为」，选择SVG格式
在弹出的保存对话框里，切换到「SVG选项」标签页
找到「字体」部分，选择「嵌入字体」，然后勾选「仅嵌入文档中使用的字符」（能缩小文件体积）
注意别勾选「简化SVG」相关的选项，不然可能会把嵌入的字体给清掉
点击保存，这样生成的SVG就自带字体了，在没装字体的系统里也能正常显示

如果不需要再编辑文本内容，还有个更稳妥的办法：

选中文本元素，点击「文字」→「转换为路径」
转成路径后，文本就变成了矢量图形，完全不需要依赖字体，任何系统都能正常显示，但代价是之后没法再修改文字内容

方法2：手动修改SVG代码（针对你试过<defs>但失败的情况）

如果你想手动搞定，可能之前的<defs>配置有细节没做好，按下面的步骤来：

准备字体的Base64编码
把你的字体文件（.ttf或.otf格式）转成Base64字符串：
- Windows用PowerShell：[Convert]::ToBase64String((Get-Content -Path "你的字体文件.ttf" -Encoding Byte))，把输出的字符串复制下来
- Mac/Linux用终端：base64 你的字体文件.ttf > font-base64.txt，打开txt文件复制里面的内容

修改SVG的<defs>部分
在SVG的<defs>标签里添加字体样式，替换掉你之前的配置：

<defs>
  <style type="text/css">
    @font-face {
      font-family: '你的字体名称'; /* 要和文本元素的font-family一致 */
      src: url(data:font/truetype;base64,这里粘贴刚才的Base64编码) format('truetype');
      font-weight: normal; /* 对应你的字体权重，比如bold */
      font-style: normal; /* 对应字体样式，比如italic */
    }
  </style>
</defs>

检查文本元素的font-family
确保所有用这个字体的文本元素，font-family属性和@font-face里的font-family完全一致，比如：
```
<text x="10" y="50" font-family="你的字体名称" font-size="24">你的Logo文字</text>
```

常见坑要避开

有些字体有版权限制，不允许嵌入，先确认字体的许可协议
手动嵌入时，Base64编码必须是一整串，不能有换行，否则会失效
Inkscape如果开启了「文件」→「首选项」里的「保存时自动简化SVG」，也可能会去掉嵌入的字体，记得关掉

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