Сохранение типа шрифта в файле SVG иллюстратора

Если вы хотите быть уверены, что текст будет выглядеть одинаково во всех случаях -

Во-первых, вы можете развернуть текст перед сохранением в формате svg.

Во-вторых, в диалоговом окне сохранения шрифта вы можете нажать «преобразовать в контур».

Причина, по которой шрифт не отображается правильно для фактического типа шрифта, заключается в том, что при сохранении SVG с помощью приложения Illustrator. Приложение автоматически преобразует дизайн в код. И если внимательно присмотреться, имя шрифта в коде не соответствует фактическому шрифту, установленному в системе.

Чтобы решить проблему рендеринга шрифта, вам нужно будет скопировать код SVG из Illustrator и изменить имя шрифта, чтобы оно соответствовало имени шрифта, установленного в вашей системе. (Пример: имя шрифта в коде SVG из Illustrator «Arial-Regular», но имя шрифта, установленного в вашей системе, «Arial Regular». Здесь вам нужно будет изменить код, чтобы семейство шрифтов было «Arial Regular». ".)

Это решит вашу проблему без необходимости конвертировать шрифты в контур.

Надеюсь это поможет!

Как вы заметили, шрифт является ссылкой на файл шрифта, который может быть (или не быть) доступным для системы, которая пытается открыть файл svg. Решение состоит в том, чтобы преобразовать ваш тип в пути, чтобы кривые явно сохранялись в файле.

Что касается того, почему браузер может не знать шрифт, на который вы пытаетесь сослаться, это неясно, поскольку я предполагаю, что вы тестируете на том же компьютере, который вы использовали при создании файла svg. Вполне вероятно, что шрифт можно выбрать в Illustrator, но формально он не установлен на уровне ОС.

архив для сети:

1. используйте гугл шрифты.
2. использование только двух семейств шрифтов макс.

Экспорт: шрифты: (текст: svg, subconjunto: нет). свойства svg: (элемент стиля).

в стилях полученного файла отредактируйте его:

1. прикрепите строку "@import".
2. прикрепите «px» ко всем размерам шрифта.
3. переименовать имя шрифта.

результат:

<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700);
body {}

.st0{fill:#868686;}
.st1{font-family:'Roboto Condensed';}
.st2{font-size:14.414px;}
.st3{letter-spacing:55px;}
.st4{fill:#1D1D1B;}
.st5{font-family:'Roboto Condensed'; font-weight: 700;}
.st6{letter-spacing:51px;}
.st7{letter-spacing:45px;}
.st8{letter-spacing:40px;}

Скорее всего, на вашем компьютере нет файла шрифта семейства шрифтов (Skia-Regular), доступного локально. Поэтому, когда вы открываете файл SVG в своем браузере, он отображается с использованием системного шрифта по умолчанию, которым в большинстве случаев является Times New Roman. Есть несколько обходных путей:

1. Используйте @import для ссылки на Google Fonts API (но загвоздка в том, что в зависимости от того, как вы встраиваете свои изображения SVG на свой веб-сайт, это работает только в том случае, если вы используете встроенный SVG и тег объекта SVG)
2. Преобразуйте свои шрифты в путь (что увеличивает размер файла и приводит к размытому тексту, поскольку вы потеряли рендеринг ClearType )
3. Встраивайте шрифты в SVG-файл с помощью Nano

Вы можете узнать больше об использовании пользовательских шрифтов в SVG здесь: https://css-tricks.com/using-custom-fonts-with-svg-in-an-image-tag/

Вы можете встроить используемый шрифт прямо в ваш файл SVG. Таким образом, правильный шрифт будет отображаться независимо от шрифтов, установленных в системе пользователя. Это могут сделать инструменты CLI Nano или svg-body . Но оба инструмента поддерживают только шрифты Google.

Отказ от ответственности: я автор svg-buddy. Я надеюсь, что этот инструмент с открытым исходным кодом будет полезен для других.