SVG文件嵌入自定义字体失败：Firefox无法识别@font-face定义字体的问题求助

AI 小北

2026-4-8

大家好，我最近在处理SVG嵌入自定义字体的问题时卡壳了，想请各位大佬帮忙排查下问题所在！

根据我目前查到的资料，理论上可以在SVG根元素层级插入<style>块，通过@font-face来引入自定义字体。但实际操作后，Firefox的开发者工具里整个<style>块都是灰色的，浏览器完全没有使用我定义的字体，反而 fallback 到了系统默认字体。

以下是我的SVG代码片段（关键部分）：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg version="1.1" id="svg1" width="793.70135" height="1122.52" viewBox="0 0 793.70135 1122.52" sodipodi:docname="Poster25_Entwurf_V2.svg" inkscape:version="1.3.2 (091e20e, 2023-11-25)" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <!-- Manually imported fonts -->
  <style>
    @font-face {
      font-family: 'Mudstone Sans';
      src: url('data:font/woff2;charset=utf-8;base64,d09GMgABAAAAAMOwAA8AAAAClGQAAMNPAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4b7Qgch2gGYACFfhEICojmOIeJFguMCAABNgIkA4wEBCAFjHgHnh......igIwL6bier7TJjgoFZFxIx/V8pV8DAAA=') format('woff2');
    }
  </style>
  <defs id="defs1">
    ...
  </defs>
  ...
  <!-- the text elements then look as follows -->
  <text id="text93" xml:space="preserve" x="27.836668" y="636.02002" style="font-size:16px;text-align:start;text-anchor:start;stroke-width:1.33333">
    <tspan style="font-variant:normal;font-weight:900;font-stretch:normal;font-size:53.3333px;font-family:'Mudstone Sans';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ef840b;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.33333" x="27.836668" y="636.02002" sodipodi:role="line" id="tspan95">Das Straßenfest für </tspan>
    <tspan style="font-variant:normal;font-weight:900;font-stretch:normal;font-size:53.3333px;font-family:'Mudstone Sans';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ef840b;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.33333" x="27.836668" y="702.68665" sodipodi:role="line" id="tspan173">Studis und oecher</tspan>
  </text>
  ...
</svg>

我已经尝试过这些调试手段，但都没能解决问题：

将<style>块移动到<defs>标签内部
把字体格式从woff2换成woff
给<text>元素添加顶层样式
其他一些零散的调试尝试

有没有朋友遇到过类似的问题？或者能看出我的代码里哪里有遗漏或错误吗？感谢各位的帮忙！

内容来源于stack exchange