SVG 在 HTML 内部时不使用字体

Question

我有一个 SVG 在 Chrome 中显示良好，但是当我在 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>

我错过了什么？

附录：尽管下面提供了一个有效的解决方案，但我发现直接在 html 中包含 svg 代码比引用 svg 文件更容易。这样就不会出现问题了。

Answer 1

当用作图像时（通过 html <img> 标签、SVG <image> 标签或作为 CSS 背景图像）SVG 必须包含单个文件以保护用户隐私。

您可以使用字体，但需要将字体数据转换为 data URI 并将字体嵌入到 SVG 文件中。

Answer 2

我是怎么解决的：

我没有使用 <img> 标签，而是包含了 .svg 文件内容：

<?php 
  $svg_file = file_get_contents(get_template_directory_uri().'/test.svg');
  echo $svg_file;
?>

不封装在标签内，包含的 .svg 可以要求和使用 font-family.

Answer 3

除了 incorporating/linking 到字体，通常您还可以使用选项 “将文本导出为曲线以实现字体独立性”导出 SVG 。这至少可以通过 Affinity Designer 实现。这确实使文件变重了一点，但是如果你只使用这个 SVG 中的字体，那么当然整体上要轻得多。

根据具体情况，这可能是一个值得研究的选项。

SVG 在 HTML 内部时不使用字体

SVG doesn't use font when inside HTML

html

fonts

svg

truetype

font-face