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)與正確的標頭一起使用，以將其輸出為svg並與<img/>標記一起使用。

這個問題：

這將創建2個其他文件，因此效率很低。 此外，由於每個用戶最終都會生成幾張圖像，因此占用的空間會顯着增加。

可能的解決方案＃02：

解決方案：

在illustrator中制作一個模板，然后將其另存為svg，然后勾選embed all glyphs選項。 然后用PHP腳本中的選項替換文本和樣式。 使用正確的標題並將其輸出。

這個問題：

這嚴格限制了可以使用的字體數量，因為它僅限於我為其創建模板的字體。 我想要的行為是為用戶添加選項以上傳自己的字體並使用它們。 該解決方案不允許這樣做。

可能相關的其他信息：

1. 我的開發服務器運行fedora，生產服務器使用redhat。

2. 我當前使用的@font-face規則如下：

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

Answer 1

您不能從<img>標記加載svg中聲明的任何外部資源。

唯一的解決方案是將字形或字體附加到svg文件本身的某些some腳方法。
其實，有一個不那么糟糕的方式做到這一點， 你在找到這個答案被冒犯君主 。

最好的辦法是當時 還IMO不使用<img>標簽來顯示SVG文件，而是使用<iframe>或<object>標簽，與@font-face SVG文件中聲明，甚至直接在文檔中包含內聯版本。 這些方法確實允許加載諸如字體之類的外部資源。

然后，您只需要將字體保存在服務器上，或僅將字體的URL保存在@font-face聲明中。