Использование шрифтов в SVG

SVG поддерживает несколько способов задания шрифтов для элементов <text>. Рекомендуемый современный подход — использовать CSS, примерно так же, как вы задавали бы шрифты в HTML.

Применение шрифта и его оформление с помощью CSS

В приведённом ниже коде показано, как с помощью CSS задать для элемента <text> определённый шрифт — в данном случае системный шрифт "Courier New". Обратите внимание, что здесь CSS вложен в элемент SVG <style>, но его также можно применить во включающем документе HTML.

<svg>
  <style>
    text {
      /* Specify the system or custom font to use */
      font-family: "Courier New", sans-serif;

      /* Add other styling */
      font-size: 24px;
      font-weight: bold;
      font-style: italic;
    }
  </style>
  <text x="10" y="20">Some text</text>
</svg>

Результат показан ниже:

Использование веб-шрифтов с @font-face

В предыдущем разделе для применения системного шрифта используется CSS, но веб-шрифт, заданный с помощью директивы @font-face, можно применить точно так же.

В примере показано, как сначала определить, а затем использовать семейство шрифтов с именем "FiraSans":

<svg
  viewBox="0 0 400 50"
  width="350"
  height="50"
  xmlns="http://www.w3.org/2000/svg">
  <style>
    /* Define the font family using web fonts */
    @font-face {
      font-family: "FiraSans";
      src:
        url("https://mdn.github.io/shared-assets/fonts/FiraSans-Italic.woff2")
          format("woff2"),
        url("https://mdn.github.io/shared-assets/fonts/FiraSans-Bold.woff2")
          format("woff2");
    }

    /* Style the text */
    text {
      /* Specify the system or custom font to use */
      font-family: "FiraSans", sans-serif;

      /* Add other styling */
      font-size: 24px;
      font-weight: bold;
      font-style: italic;
    }
  </style>
  <text x="10" y="20">Text styled with custom font</text>
</svg>

Указание стиля в элементе text

Вы также можете напрямую указать стиль внутри элемента <text> с помощью атрибута font-family. В этом коде показано, как применить пользовательский шрифт "My Font" к элементу <text>.

<svg>
  <text font-family="My Font" x="10" y="20">Text using "My Font" font</text>
</svg>

Обратите внимание, что это похоже на применение стиля к элементу HTML. Хотя такой способ может быть полезен в некоторых случаях, обычно лучше использовать CSS и CSS-селекторы.