HTML 使用包含自定义字体的 SVG 图像答案

【问题标题】：HTML Use an SVG image which contains a custom FontHTML 使用包含自定义字体的 SVG 图像
【发布时间】：2016-09-02 04:20:49
【问题描述】：

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

【问题讨论】：

标签： html css svg fonts

【解决方案1】：

几天前我遇到了这个问题。这是 Ubuntu 单声道 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;
}

另一种方法是在创建 SVG 的程序中“创建大纲”文本，但这会导致 SVG 文件变大，并且 SVG 中的文本不会被浏览器。

【讨论】：

【解决方案2】：

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

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

【讨论】：