Как встроить веб-шрифты Google в SVG?

Я пишу на своем сайте статью о преимуществах новых веб-технологий, в том числе HTML5, CSS3 и SVG, одним из преимуществ которых является возможность выделения текста в том, что в противном случае эффективно является изображением.

Я новичок в SVG и только что сделал свою первую приличную графику в Illustrator. Я встроил его в страницу со скриптом GWF для шрифта Ubuntu в теге. Оказывается, шрифт Ubuntu правильно отображается в обычном тексте, но для того, чтобы этот трюк работал в SVG, скрипт Google должен быть встроен в сам SVG. Как я могу это сделать?

Вы встраиваете шрифты в CSS, используя кодировку base64. Вы можете применять стили в SVG-документах, похожих на CSS, используя <style />элемент. Так что если у вас есть шрифт WOFF, вы бы вставили его так:

<style>
@font-face {
    font-family: "Sample font";
    src: url("data:application/font-woff;charset=utf-8;base64,...");
}
</style>

Где ...находятся данные шрифта в кодировке base64.

Вы можете найти примеры этого, посмотрев таблицы стилей Typekit. Я не уверен, что тип пантомимы font/woffправильный, так как я также видел, как люди утверждают, что так и должно быть application/font-woff. Хотя font/woff, font/truetype, font/opentypeи т.д. , кажется, более популярным.

В качестве альтернативы, вы могли бы взять версию веб-шрифта SVG и встроить разметку описания шрифта SVG в документ (хотя поддержка браузера все еще очень ограничена, как отмечает Люк в комментариях).

Однако вы также должны иметь возможность ссылаться на внешний шрифт в соответствии со спецификацией SVG . Казалось бы, это лучшее решение, если у вас будет несколько SVG-документов, ссылающихся на этот шрифт.

<defs>Раздел как

<defs>
  <style type="text/css">@import url(http://fonts.googleapis.com/css?family=Indie+Flower);</style>
</defs>

работает.

Вы можете встраивать Google Web Fonts в SVG напрямую, используя Nano . Он автоматически сканирует ваш SVG и выборочно встраивает только необходимые шрифты, гарантируя, что ваши шрифты Ubuntu выглядят одинаково во всех современных браузерах. В моем случае мне нужно было встроить Roboto в мой SVG:

Отказ от ответственности: я с командой за Nano, и мы тоже столкнулись с той же проблемой ранее, поэтому решили покончить с нашим собственным зудом, создав Nano. Надеюсь, это полезно!

Изменить: Вот краткое объяснение того, что происходит за сценой:

Чтобы встраивать шрифты в SVG, сначала нужно знать, какие семейства шрифтов используются. Затем вам нужно найти эти файлы шрифтов и скачать их. После загрузки необходимо преобразовать обычный, полужирный, курсив и полужирный курсив в кодировку base 64. Если вы делаете это вручную, это огромная работа, над большим количеством файлов, чтобы узнать, какой файл использует жирный шрифт, а какой нет. Затем вы должны скопировать все 4 строки в кодировке 64 base в ваш SVG.

Вот почему мы собираем Nano и проверяем, что он сканирует SVG автоматически и вставляет только используемые шрифты. Например, если жирный шрифт не используется или текст отсутствует, шрифты не будут вставлены. Все, что вам нужно сделать, это перетащить SVG в Nano, и это работает как шарм! Вы можете узнать больше здесь: https://vecta.io/blog/making-svg-easier-to-use

Это может быть слишком упрощенно, но рассматривали ли вы загрузку шрифта в виде zip-файла из google и затем позволяете Illustrator преобразовывать его по мере необходимости в вывод SVG-файла?

Это только теоретически, так как я еще не пробовал, но в теории, похоже, работает.

Добавьте следующее после <desc>тега

<defs>
<style type="text/css">@import url('http://fonts.googleapis.com/css?family=Lobster|Fontdiner+Swanky|Crafty+Girls|Pacifico|Satisfy|Gloria+Hallelujah|Bangers|Audiowide|Sacramento');</style>
</defs>

ОБНОВЛЕНИЕ к моему ответу. Теперь я предпочитаю другой ответ на этой странице, который должен использовать Nano: https://graphicdesign.stackexchange.com/a/121950/45239

Предполагая, что вы загрузили и установили веб-шрифт в своей системе и создали SVG (возможно, с использованием множества тех же шагов, которые я описал ниже, но не выбирая «Шрифт: преобразовать в контуры»), вы можете загрузить SVG в Nano и выберите опцию «Вставить шрифт: Да» и нажмите «Загрузить».

Мой предыдущий ответ:

Если вы готовы пожертвовать выбором текста и SEO:

1. Загрузите веб-шрифт.
2. Установите его локально.
3. Откройте Adobe Illustrator
4. Введите текст.
5. Файл> Экспорт> Экспортировать как…
6. Выберите ".SVG"

7. Выберите эти настройки:

   • Стиль: встроенный стиль
   • Шрифт: конвертировать в контуры
   • Изображения: заповедник
   • Идентификаторы объектов: имена слоев
   • Десятичное число: 2
   • (включено) Minify
   • (включено) Отзывчивый

8. При желании загрузите полученный svg на https://vecta.io/nano (он смог уменьшить размер моего файла на 8,2%)