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

Question

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

问题是，我希望能够在 svg 中嵌入字体。 我试过使用 @font-face规则在 svg 的 css 中，但这没有用(MDN 说它只适用于 Android 和 Safari)。

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

我考虑过的解决方案:

可能的解决方案#01:

解决方案:

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

问题:

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

可能的解决方案#02:

解决方案:

在illustrator中制作一个模板，然后保存为svg，勾选embed all glyphs选项。然后用 PHP 脚本中的选项替换文本和样式。使用正确的 header 并输出它。

问题:

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

可能有一定相关性的附加信息:

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

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

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

Answer 1

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

唯一的解决方案是使用一些蹩脚的方法将字形或字体附加到 svg 文件本身。
实际上，您在this answer 中找到了一种不那么蹩脚的方法通过 lèse-majesté .

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

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