0

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

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

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

我考虑过的解决方案：

可能的解决方案#01：

解决方案：

在我的主文件中，创建一个使用@font-facecss 规则的 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"); }

4

1 回答 1

0

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

唯一的解决方案是将字形或字体附加到 svg 文件本身的一些糟糕的方法。实际上，正如您在lèse-majesté的这个答案中发现的
那样，没有那么糟糕的方法。

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

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

于 2015-12-29T04:41:11.240 回答