SVG шрифты
Когда был написан стандарт SVG, поддержка веб-шрифтов ещё не была широко распространена в браузерах. Поскольку доступ к правильному файлу шрифта имеет решающее значение для правильного отображения текста, в SVG была добавлена технология описания шрифтов. Она не совместима с другими форматами, такими как PostScript или OTF, это лишь простое средство вложения информации о глифах в SVG при визуализации.
Примечание: SVG-шрифты корректно поддерживаются только в Safari. Эта возможность не была реализована в Internet Explorer, она также была удалена из Chrome 38 (и Opera 25), разработчики Mozilla отложили её реализацию на неопределённое время, чтобы сосредоточиться на WOFF. Другие инструменты, такие как плагин Adobe SVG Viewer, Batik и частично Inkscape поддерживают встраиваемые шрифты SVG.
Элемент <font> используется для определения 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>. Он имеет атрибут id, который позволяет ему ссылаться через URI (см. ниже). Атрибут horiz-adv-x определяет, насколько широкий символ в среднем по сравнению с путями для отдельных глифов. Обычно подходит значение 1000. Существует несколько сопутствующих атрибутов, которые помогают определить ограничительные рамки.
Элемент <font-face> является в SVG эквивалентом объявления шрифта с помощью CSS-свойства @font-face. Он определяет основные свойства финального шрифта, такие как вес, стиль и т. д. В приведённом выше примере, первое и самое важное свойство, которое должно быть определено - это font-family, на значение которого затем можно ссылаться в свойствах CSS и SVG. Атрибуты font-weight и font-style имеют ту же цель, что и соответствующие свойства CSS. Все последующие атрибуты - это команды рендеринга для механизма компоновки шрифтов, задающие, к примеру, какая средняя высота символов направленных вверх или вниз выносных элементов.
Дочерний элемент <font-face-src> соответствует свойству src для атрибута @font-face в CSS. Вы можете указать внешние источники для определения шрифтов с помощью элементов <font-face-name> и <font-face-uri>. В приведённом выше примере указано, что если у рендерера имеется локальный доступный шрифт с именем «Super Sans Bold», он должен использовать его.
Следующий элемент за <font-face-src> - это <missing-glyph>. Он определяет, что должно отображаться, если символ в шрифте не был найден и если нет запасного варианта. Он также показывает, как создаются глифы: добавлением в него любого графического контента SVG. В нем вы можете использовать буквально любые элементы SVG, даже <filter>, <a> или <script>. Однако для простых глифов вы можете просто добавить атрибут d - он определяет форму для глифа точно так же, как работают стандартные пути SVG.
Сами глифы затем определяются элементами <glyph>. Наиболее важным атрибутом является unicode. Он определяет код кодировки unicode, представленный этим символом. Если вы указываете атрибут lang на глифе, вы можете дополнительно ограничить его определёнными языками (представленными xml:lang). Вы можете использовать произвольный SVG для определения глифа, и это позволит вам создать замечательные эффекты.
Есть ещё два элемента, которые могут быть определены внутри шрифта: <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>
Тем не менее, вы можете объединить несколько методов для того чтобы определить как и где использовать шрифт.
Опция: использование CSS @font-face
Вы можете использовать свойство @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>