Шрифты SVG

Для встраивания шрифта в SVG требуется несколько компонентов. Давайте рассмотрим пример объявления (из спецификации из спецификации), и разберем детали.

<font id="Font1" horiz-adv-x="1000">
  <font-face
    font-family="Super Sans"
    font-weight="bold"
    font-style="normal"
    units-per-em="1000"
    cap-height="600"
    x-height="400"
    ascent="700"
    descent="300"
    alphabetic="0"
    mathematical="350"
    ideographic="400"
    hanging="500">
    <font-face-src>
      <font-face-name name="Super Sans Bold" />
    </font-face-src>
  </font-face>
  <missing-glyph><path d="M0,0h200v200h-200z" /></missing-glyph>
  <!-- Outline of exclamation point glyph -->
  <glyph unicode="!" horiz-adv-x="300"></glyph>
  <glyph unicode="@"><!-- Outline of @ glyph --></glyph>
  <!-- more glyphs -->
</font>

Мы начинаем с элемента <font>. Он содержит атрибут id, чтобы его можно было ссылаться через URI (см. ниже). Атрибут horiz-adv-x определяет среднюю ширину символа по сравнению с определениями траекторий отдельных глифов. Значение 1000 устанавливает разумное значение для работы. Есть несколько дополнительных атрибутов, которые помогают дополнительно определить базовую компоновку области глифа.

Элемент <font-face> является SVG-эквивалентом объявления CSS @font-face. Он определяет основные свойства конечного шрифта, такие как начертание, стиль и т. д. В примере выше, первым и самым важным для определения является font-family, значение которого затем можно использовать в CSS и SVG-свойствах font-family. Атрибуты font-weight и font-style имеют ту же цель, что и соответствующие описатели в CSS. Все последующие атрибуты являются инструкциями для рендеринга для движка компоновки шрифта; например, какая часть общей высоты глифов являются верхними выносными элементами.

Его дочерний элемент, <font-face-src>, соответствует описателю CSS src в объявлениях @font-face. Вы можете указывать внешние источники для объявлений шрифтов с помощью его дочерних элементов <font-face-name> и <font-face-uri>. Приведенный выше пример указывает, что если рендерер имеет доступный локальный шрифт с именем «Super Sans Bold», он должен использовать его вместо этого.

Следующий за <font-face-src> элемент <missing-glyph>. Он определяет, что должно отображаться, если определенный глиф не найден в шрифте и если нет механизмов подстановки. Он также показывает, как создаются глифы: путём добавления любого графического SVG-контента внутрь. Вы можете использовать любые другие SVG-элементы, даже <filter>, <a> или <script>. Однако для простых глифов вы можете добавить атрибут d — он определяет форму глифа точно так же, как работают стандартные SVG-траектории.

Фактические глифы определяются элементами <glyph>. Наиболее важным атрибутом является unicode. Он определяет точечный код Юникода, который представляет этот глиф. Если вы также укажете атрибут lang на глифе, вы можете дополнительно ограничить его определёнными языками (представленными xml:lang на целевом объекте) исключительно. Опять же, вы можете использовать произвольный SVG для определения глифа, что позволяет создавать эффекты, поддерживающие пользовательские агенты.

Внутри элемента font могут быть определены ещё два элемента: <hkern> и <vkern>. Каждый из них содержит ссылки на по крайней мере два символа (атрибуты u1 и u2) и атрибут k, определяющий, на сколько должна быть уменьшена дистанция между этими символами. Приведенный ниже пример инструктирует пользовательские агенты разместить символы «A» и «V» ближе друг к другу, чем стандартная дистанция между символами.

<hkern u1="A" u2="V" k="20" />

После того, как вы определили объявление шрифта, как описано выше, вы можете просто использовать атрибут font-family для фактического применения шрифта к некоторому SVG-тексту:

<font>
  <font-face font-family="Super Sans" />
  <!-- and so on -->
</font>

<text font-family="Super Sans">My text uses Super Sans</text>

Однако вы можете комбинировать несколько методов для большей свободы в определении и применении шрифта.

Вы можете использовать @font-face для ссылки на удалённые (и не только) шрифты:

<font id="Super_Sans">
  <!-- and so on -->
</font>

<style>
  @font-face {
    font-family: "Super Sans";
    src: url(#Super_Sans);
  }
</style>

<text font-family="Super Sans">My text uses Super Sans</text>

Уже упомянутый font-face-uri элемент позволяет ссылаться на внешний шрифт; тем самым обеспечивая большую возможность повторного использования:

<font>
  <font-face font-family="Super Sans">
    <font-face-src>
      <font-face-uri href="fonts.svg#Super_Sans" />
    </font-face-src>
  </font-face>
</font>