内部HTML时SVG不使用字体

Question

我有一个在Chrome中显示正常的SVG,但是当我在HTML页面中使用它时,它不使用正确的字体,而是使用默认字体.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style type="text/css">
      <![CDATA[
        /* latin-ext */
        @font-face {
          font-family: 'Roboto-Black';
          src: url(./Roboto-Black.ttf)
        }
      ]]>
    </style>
  </defs>
  <text style="font-family: 'Roboto-Black'; font-weight:normal;" transform="matrix(1, 0, 0, 1, 239.2, 51.394)">
    <tspan x="-101.469" y="27" font-family="Roboto-Black" font-size="72" fill="#000000">TEST</tspan>
  </text>
</svg>

SVG在Chrome中显示正常,但在HTML页面中显示时,它不使用正确的字体.

<html>
  <head></head>
  <body>
    <img src="test.svg" width="100%">
  </body>
</html>

我错过了什么？

---

附录:虽然下面提供了一个有效的解决方案,但我发现将svg代码直接包含在html中更容易,而不是引用svg文件.这样就不会出现问题.

Answer 1

当用作图像(通过html <img>标记,SVG <image>标记或CSS背景图像)时,SVG必须由单个文件组成,以保护用户隐私.

您可以使用字体,但是您需要将字体数据转换为数据URI并将字体嵌入SVG文件中.