HTML使用包含自定义Font的SVG图像

Question

我有一个SVG图像（使用InkScape创建），其中包含带有Ubuntu Mono字体的文本。我正在使用，但没有安装字体的计算机正在显示带有其他字体的文本。如何在SVG文件中上传字体？

Answer 1

您可以将字体转换为base64，并使用样式标记将其添加到svg文件中。

<defs>
  <style type="text/css">
    @font-face {
      font-family: 'FONT_NAME';
      src: url(MIME+BASE64_STRING) format('TYPE_OF_FONT');
    }
  </style>
</defs>

Answer 2

几天前我遇到了这个问题。这是Ubuntu mono ttf的链接：

http://ff.static.1001fonts.net/u/b/ubuntu.mono.ttf

将其上传到您的服务器，然后在CSS中声明字体：

@font-face {
    font-family: Ubuntu-Mono;
    src: url(/path/to/ubuntu.mono.ttf);
}

然后在相应SVG的CSS中，将字体声明为：

.svg {
    font-family: Ubuntu-Mono;
}

替代方案也可以是＆＃34;创建大纲＆＃34;您在创建SVG的程序中的文本，虽然这将导致更大的SVG文件，并且SVG中的文本不会被浏览器识别为文本。