17

Web ページに埋め込まれた svg でカスタム フォントを使用したいと考えています。setattribute を使用すると、Arial... フォントを使用できます。それらのフォントはブラウザに埋め込まれており、使用できると思います。しかし、カスタム フォントを使用するにはどうすればよいでしょうか。Firefox では、たとえば @font-face の css で使用すると ....

@font-face {

                font-family: "ITCGothicBold";
                src: url('fonts/ITCGothicBold.ttf') format("truetype");

}

その font-family は Html Web ページで機能します。

一方、たとえば、svg テキストでは次のようになります。

<text xml:space="preserve" text-anchor="middle" font-family="ITCGothicBold.ttf" font-size="24" id="svg_1" y="72.83333" x="74.75" stroke-width="0" stroke="#000000" fill="#000000">HELLO</text>

例としてITCGothicBold.ttfを使用したいと思います。setattribute を使用すると、ITCGothicBold.ttf を font_family 属性に入れることができますが、何も変わりません。HELLO テキストは変わりません。Webページに埋め込まれたsvgでカスタムフォントを操作する方法を知っている人はいますか? ありがとう

注:私が使用した完全なコードは次のとおりです。

<svg width="612" height="394" xmlns="http://www.w3.org/2000/svg">
    <defs>
  <style type="text/css">@font-face {

                font-family: "ITCGothicBold.ttf";
                src: url('fonts/ITCGothicBold.ttf') format("truetype");

}</style>
 </defs>
 <g>
  <title>Calque 1</title>
  <text fill="#000000" stroke="#000000" stroke-width="0" x="75.75" y="72.83333" id="svg_1" font-size="24" font-family="ITCGothicBold.ttf" text-anchor="middle" xml:space="preserve">HELLO</text>
 </g>
</svg>
4

2 に答える 2