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>
  <glyph unicode="!" horiz-adv-x="300"><!-- Outline of exclam. pt. glyph --></glyph>
  <glyph unicode="@"><!-- Outline of @ glyph --></glyph>
  <!-- more glyphs -->
</font>

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

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

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

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

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

Есть ещё два элемента, которые могут быть определены внутри шрифта: <hkern> (en-US) и <vkern> (en-US). Каждый из них содержит ссылки не менее чем на два символа (атрибуты 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 type="text/css">
@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 xlink:href="fonts.svg#Super_Sans" />
    </font-face-src>
  </font-face>
</font>

• « Предыдущая статья
• Следующая статья »