PHP - 动态创建带有嵌入字体的 svg
PHP - Dynamically creating a svg with embedded fonts
我想动态创建一个我可以在 <img/> 标签中使用的 svg。这本身很容易；创建一个 svg，设置 header 并将生成的部分回显到正确的位置。
问题是，我希望能够在 svg 中嵌入字体。
我试过在 svg 的 css 中使用 @font-face 规则，但这没有用（MDN 说它只适用于 Android 和 Safari）。
有什么cross-browser方法可以做到这一点吗？
我考虑过的解决方案：
可能的解决方案#01：
解决方法：
在我的主文件中，创建一个使用 @font-face css 规则的 svg 文件，然后使用 exec() 使用 inkscape 将该 svg 转换为另一个 svg，从而转换所有字母进入路径。然后我可以使用 echo file_get_contents($inkscape_file) 和正确的 headers 将其输出为 svg，可以与 <img/> 标签一起使用。
这个问题：
这会创建 2 个额外的文件，因此效率似乎很低。此外，由于每个用户最终会生成多张图像，因此 space 它占用的空间会显着增长。
可能的解决方案 #02：
解决方法：
在illustrator中制作一个模板，然后将其保存为svg，并勾选嵌入所有字形选项。然后用 PHP 脚本中的选项替换文本和样式。使用正确的header并输出这个。
这个问题：
这严重限制了可以使用的字体数量，因为它仅限于我为其创建模板的字体。我想要的行为是为用户添加上传他们自己的字体并使用它们的选项。此解决方案不允许这样做。
可能具有一定相关性的其他信息：
- 我的开发服务器运行的是fedora，生产服务器使用的是redhat。
我目前使用的@font-face规则如下：
@font-face {
font-family: Potato;
src: url("/fonts/potato.otf");
}
您不能从 <img> 标签加载在 svg 中声明的任何外部资源。
唯一的解决办法是将字形或字体附加到 svg 文件本身。
实际上有一种不那么蹩脚的方法，就像 you 在 this answer by lèse-majesté.
中找到的那样
最好的方法是 然后 仍然是 IMO 不要使用 <img> 标签来显示 svg 文档，而是使用 <iframe> 或 <object> 标签，并在 svg 文件中声明 @font-face ，甚至直接将内联版本包含到文档中。这些方法确实允许加载外部资源，例如字体。
然后你只需要将字体保存在你的服务器上，或者只是将 url 保存到 @font-face 声明中的字体。
我想动态创建一个我可以在 <img/> 标签中使用的 svg。这本身很容易；创建一个 svg，设置 header 并将生成的部分回显到正确的位置。
问题是，我希望能够在 svg 中嵌入字体。
我试过在 svg 的 css 中使用 @font-face 规则，但这没有用（MDN 说它只适用于 Android 和 Safari）。
有什么cross-browser方法可以做到这一点吗？
我考虑过的解决方案：
可能的解决方案#01：
解决方法：
在我的主文件中，创建一个使用 @font-face css 规则的 svg 文件，然后使用 exec() 使用 inkscape 将该 svg 转换为另一个 svg，从而转换所有字母进入路径。然后我可以使用 echo file_get_contents($inkscape_file) 和正确的 headers 将其输出为 svg，可以与 <img/> 标签一起使用。
这个问题：
这会创建 2 个额外的文件，因此效率似乎很低。此外，由于每个用户最终会生成多张图像，因此 space 它占用的空间会显着增长。
可能的解决方案 #02：
解决方法：
在illustrator中制作一个模板，然后将其保存为svg，并勾选嵌入所有字形选项。然后用 PHP 脚本中的选项替换文本和样式。使用正确的header并输出这个。
这个问题：
这严重限制了可以使用的字体数量，因为它仅限于我为其创建模板的字体。我想要的行为是为用户添加上传他们自己的字体并使用它们的选项。此解决方案不允许这样做。
可能具有一定相关性的其他信息：
- 我的开发服务器运行的是fedora，生产服务器使用的是redhat。
我目前使用的
@font-face规则如下：@font-face { font-family: Potato; src: url("/fonts/potato.otf"); }
您不能从 <img> 标签加载在 svg 中声明的任何外部资源。
唯一的解决办法是将字形或字体附加到 svg 文件本身。
实际上有一种不那么蹩脚的方法，就像 you 在 this answer by lèse-majesté.
最好的方法是 然后 仍然是 IMO 不要使用 <img> 标签来显示 svg 文档，而是使用 <iframe> 或 <object> 标签，并在 svg 文件中声明 @font-face ，甚至直接将内联版本包含到文档中。这些方法确实允许加载外部资源，例如字体。
然后你只需要将字体保存在你的服务器上，或者只是将 url 保存到 @font-face 声明中的字体。