如何在SVG中嵌入字体供rsvg-convert工具识别使用？

问题背景 #

用rsvg-convert将SVG转PNG时，其他元素渲染正常，但自定义字体始终无法被libRsvg识别。试过两种方式都失效：

• 通过CSS @font-face引入本地woff2字体，在Safari中显示正常，但转PNG失败
• 将字体转成Base64嵌入SVG，浏览器依然正常，但转PNG还是不行

环境：macOS系统，Homebrew安装的librsvg，拥有目标字体的OTF、TTF格式文件。

最小复现SVG代码：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 20 20" width="100px" height="100px">
  <style type="text/css">
    @font-face {
      font-family: "Valkyrie";
      font-style: normal;
      font-weight: normal;
      font-stretch: normal;
      font-display: auto;
      src: url("./.font/valkyrie/valkyrie_ot_a_regular.woff2") format("woff2");
    }
    text {
      font-family: "Valkyrie";
    }
  </style>
  <text x="0" y="0" font-size="10" text-anchor="middle" dominant-baseline="central">ABC</text>
</svg>

Base64修改后的@font-face片段：

src: url("data:application/octet-stream;base64,[...]") format("woff2");

可能原因 #

• libRsvg对WOFF2格式的支持存在兼容性问题，尤其是旧版本
• 命令行环境下相对路径解析、Base64 MIME类型识别逻辑和浏览器不同
• macOS系统字体加载机制在GUI和命令行环境的差异

解决方法 #

1. 改用OTF/TTF格式字体 #

libRsvg对OTF、TTF的支持比WOFF2更稳定，直接替换字体格式：

/* OTF格式示例 */
@font-face {
  font-family: "Valkyrie";
  src: url("./.font/valkyrie/valkyrie_ot_a_regular.otf") format("opentype");
}

/* TTF格式示例 */
@font-face {
  font-family: "Valkyrie";
  src: url("./.font/valkyrie/valkyrie_ot_a_regular.ttf") format("truetype");
}

注意确认字体文件路径是相对于SVG文件的正确位置。

2. 将字体安装到系统 #

把Valkyrie字体安装到macOS系统字体库（拖到~/Library/Fonts或/Library/Fonts），然后SVG里直接用字体名称，无需@font-face：

text {
  font-family: "Valkyrie";
}

这样rsvg-convert会直接调用系统字体，绕开嵌入或路径问题。

3. 更新librsvg及依赖 #

旧版本librsvg的WOFF2支持不完善，用Homebrew更新到最新版：

brew update
brew upgrade librsvg

更新后会同步升级依赖的harfbuzz、freetype等字体处理库，可能解决兼容性问题。

4. 修正Base64的MIME类型 #

如果坚持用Base64嵌入，把MIME类型改成对应字体格式的标准类型：

/* OTF格式 */
src: url("data:font/opentype;base64,[...]") format("opentype");

/* TTF格式 */
src: url("data:font/truetype;base64,[...]") format("truetype");

/* WOFF2格式 */
src: url("data:font/woff2;base64,[...]") format("woff2");

之前的application/octet-stream可能导致libRsvg无法正确识别字体类型。

5. 使用绝对路径引用本地字体 #

命令行环境下相对路径可能解析出错，换成绝对路径试试：

src: url("/Users/你的用户名/项目路径/.font/valkyrie/valkyrie_ot_a_regular.woff2") format("woff2");

验证方式 #

修改SVG后，执行以下命令转换并检查PNG：

rsvg-convert input.svg -o output.png

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