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

48

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

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

Жюль
источник
1
Одно важное замечание относительно решений на основе @import: они не работают для фоновых изображений. Вы должны встроить шрифт через base64 или использовать вместо него тег image / object.
Микки,

Ответы:

39

Вы встраиваете шрифты в 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-документов, ссылающихся на этот шрифт.

Lèse Majesté
источник
2
Правильный MIME-тип для .woff сейчас application/font-woff. stackoverflow.com/a/5142316/90674
sshow
3
Что касается «вы могли бы на самом деле взять версию веб-шрифта SVG и встроить разметку описания шрифта SVG в документ», вы должны знать, что «шрифты SVG в настоящее время поддерживаются только в браузерах Safari и Android». См developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_fonts (также caniuse.com/#feat=svg-fonts )
Лука
1
Эта ветка очень помогла, но тогда возник вопрос, как преобразовать шрифт в base64. Этот сайт transfonter.org очень помог и позволяет выбрать только подмножество шрифта для преобразования, чтобы уменьшить размер файла.
Fabien Snauwaert
Этот ответ выглядел заманчиво, но в конечном итоге я нашел эти шаги более простыми, поэтому я поделился ими: graphicdesign.stackexchange.com/a/124900/45239
Райан
Когда я открываю svg в Adobe Illustrator, шрифты не загружаются. Любая помощь?
Амир Нахва
13

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

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

работает.

leighman
источник
13
В текущих (февраль 2016 г.) веб-браузерах это работает только при автономной загрузке файла SVG. См. Пример для marians.github.io/test-webfonts-in-svg/test.svg . Открывая тот же SVG на странице HTML, шрифт не загружается / не отображается. Используйте в качестве примера marians.github.io/test-webfonts-in-svg .
Мариан
1
Кажется, что и отдельная страница SVG, и страница HTML работают одинаково в Chrome версии 73.0.3683.103 (официальная сборка) (64-разрядная версия).
Пол Грайм
Он загружает шрифты, когда я открываю svg в браузере, но когда я открываю тот же файл svg в Adobe Illustrator, он не загружает шрифты. Любая помощь?
Амир Нахва
3

Вы можете встраивать 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

Цинь
источник
ОК, отлично выглядит. К сожалению, загрузка на сайт Wordpress, который был весьма рад принять SVG раньше, теперь не будет «Извините, этот тип файла не разрешен по соображениям безопасности». - что мне нужно положить обратно, чтобы сделать эту работу?
Крис Пинк
1

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

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

gabearnold
источник
0

Добавьте следующее после <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>
muTheTechie
источник
Зачем включать так много шрифтов Google? Это даже не все из них или наиболее часто используемые, которые я вижу много и которые добавят к общему весу SVG.
MrMesees
1
Он загружает шрифты, когда я открываю svg в браузере, но когда я открываю тот же файл svg в Adobe Illustrator, он не загружает шрифты. Любая помощь?
Амир Нахва
0

ОБНОВЛЕНИЕ к моему ответу. Теперь я предпочитаю другой ответ на этой странице, который должен использовать 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%)

Райан
источник
К сожалению, «преобразовать в контуры» - не лучший вариант для текста меньшего размера.
Крис Пинк
@ChrisPink, да, вы правы! Пожалуйста, поделитесь, если вы нашли какой-либо другой вариант для малого размера шрифта
Super Model
1
@SuperModel Я использовал Nano с большим успехом, шрифты выбирали стили из прилагаемого документа. Мои первые попытки потерпели неудачу, но с любезной помощью команды Nano, которую мы разработали, это был случай, когда заголовок SVG остался неповрежденным.
Крис Пинк