Як вбудувати веб-шрифти 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 у свій SVG безпосередньо за допомогою Nano . Він автоматично сканує ваш SVG та вибірково вставляє лише необхідні шрифти, гарантуючи, що шрифти Ubuntu будуть однаковими у всіх сучасних браузерах. У моєму випадку мені потрібно було вбудувати Roboto у свій SVG:

Відмова: Я з командою, що стоїть за Nano, і ми теж зіткнулися з тією ж проблемою, раніше, тому вирішили подряпати власний свербіж, будуючи Nano. Сподіваюся, це корисно!

Редагувати: Ось коротке пояснення того, що відбувається за сценою:

Щоб вставити шрифти в SVG, спочатку потрібно знати, які сімейства шрифтів використовуються. Потім потрібно знайти ці файли шрифтів і завантажити їх. Після завантаження ви повинні перетворити звичайні, жирні, курсивні та жирні курси в кодування 64 бази. Якщо ви робите це вручну, це велика кількість роботи над великою кількістю файлів, щоб знати, який файл використовує жирний, а який - ні. Тоді вам доведеться скопіювати всі 4 базові 64 закодовані рядки у свій 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
   • (увімкнено) Мінімізувати
   • (увімкнено) Чуйний

8. За бажанням завантажте отриманий SVG на https://vecta.io/nano (вдалося зменшити розмір мого файлу на 8,2%)