<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:
ソリューション：
イラストレーターでテンプレートを作成し、svg として保存し、すべてのグリフを埋め込むオプションにチェックを入れます。次に、テキストとスタイルを PHP スクリプトのオプションに置き換えます。正しいヘッダーを使用して、これを出力します。
これに関する問題：
これにより、使用できるフォントの量が大幅に制限されます。これは、私がテンプレートを作成したものに限定されるためです。私が望んでいた動作は、ユーザーが独自のフォントをアップロードして使用するオプションを追加することでした。このソリューションでは、それができません。
関連する可能性のある追加情報:
- 私の開発サーバーは fedora を実行しており、実動サーバーは redhat を使用しています。
@font-face私が現在使用しているルールは次のとおりです。@font-face { font-family: Potato; src: url("/fonts/potato.otf"); }