Пользовательский шрифт в svg

Я хотел бы использовать пользовательские шрифты в svg, встроенном в веб-страницу. С setattribute я могу использовать Arial... fonts. Я думаю, что эти шрифты встроены в браузер, и я могу использовать его. Но как я могу использовать пользовательские шрифты? В Firefox, когда я использую в css для примера @font-face....

@font-face {

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

}

что семейство шрифтов работает на веб-странице Html.

С другой стороны, например, в тексте 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 не изменяется. Кто-нибудь знает, как работать с пользовательским шрифтом в 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>

Ответ 1

Вы можете изменить шрифты в svgs так же, как в css.

<style>
    @font-face {
        font-family: font;
        src: url(font.woff);
    }
    svg{
        font-family: font, fallBackFonts, sans-serif;
    }
</style

Хотя я бы посоветовал вам определить это более подробно для лучшей совместимости. Таким образом, вы можете обеспечить различные запасные варианты.

@font-face { 
    font-family: 'font'; 
    src: url('font.eot');
    src: url('location/of/font.eot?#iefix') format('eot'), 
         url('location/of/font.woff') format('woff'), 
         url('location/of/font.ttf') format('truetype'), 
         url('location/of/font.svg#webfont') format('svg'); 
    font-weight: 400; 
    font-style: normal; 
}

Службы, обеспечивающие преобразование шрифтов (для файлов eot, woff, truetype и svg), являются...
https://github.com/briangonzalez/fontprep
http://www.fontsquirrel.com/tools/webfont-generator

При этом, если вы действительно хотите назначить шрифт в svg, вы бы добавили атрибут font-family точно так же, как вы. Хотя я бы не включил расширение файла (.ttf) в схему именования.

Ответ 2

Вот как я ссылался на SVG-шрифт из другого SVG файла:

<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000">

  <defs>
    <font-face>
      <font-face-src>
        <font-face-uri href="file:///.../DejaVuSans.svg"/>
      </font-face-src>
    </font-face>
  </defs>

  <text x="0" y="400" font-family="DejaVu Sans" font-size="200">
    Abc
  </text>
</svg>