PHP - 动态创建嵌入字体的 svg

Question

我想动态创建一个可以在<img/> 标记中使用的svg。这本身很容易；创建一个 svg，设置标题并将生成的部分回显到正确的位置。

问题是，我希望能够在 svg 中嵌入字体。 我已经尝试在 svg 的 css 中使用 @font-face 规则，但这不起作用（MDN 说它只适用于 Android 和 Safari）。

有没有跨浏览器的方法来做到这一点？

我考虑过的解决方案：

可能的解决方案 #01：

解决办法：

在我的主文件中，创建一个使用@font-face css 规则的svg 文件，然后使用exec() 使用inkscape 将该svg 转换为另一个svg，将所有字母转换为路径。然后我可以使用带有正确标题的echo file_get_contents($inkscape_file) 将其输出为可与<img/> 标签一起使用的svg。

这个问题：

这会创建 2 个额外的文件，因此看起来效率很低。此外，由于每个用户最终会生成多张图像，因此占用的空间会显着增加。

可能的解决方案#02：

解决办法：

在 Illustrator 中制作模板，然后将其保存为 svg，并勾选嵌入所有字形选项。然后用 PHP 脚本中的选项替换文本和样式。使用正确的标题并输出。

这个问题：

这严重限制了可以使用的字体数量，因为它仅限于我为其创建模板的字体。我想要的行为是为用户添加上传自己的字体并使用它们的选项。此解决方案不允许这样做。

可能具有一定相关性的其他信息：

1. 我的开发服务器运行fedora，生产服务器使用redhat。

2. 我目前使用的@font-face规则如下：

   @font-face { font-family: Potato; src: url("/fonts/potato.otf"); }

Answer 1

您不能从<img> 标签加载任何在svg 中声明的外部资源。

唯一的解决方案是将字形或字体附加到 svg 文件本身的一些蹩脚的方法。
实际上有一种不那么蹩脚的方法，因为 你被lèse-majesté在this answer找到。

最好的方法是然后 还是IMO不使用<img>标签来显示svg文档，而是使用<iframe>或<object>标记，在 svg 文件中声明 @font-face，甚至直接将内联版本包含到文档中。这些方法确实允许加载外部资源，例如字体。

然后您只需将字体保存在您的服务器上，或者只需在 @font-face 声明中保存字体的 URL。