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

Привет, я новичок в иллюстраторе и создал изображение, которое использует шрифт "Skia-Regular". Но когда я сохраняю это изображение в формате .svg , он меняет тип шрифта. И когда я открываю файл формата .svg в браузере, шрифт совершенно другой. Может кто-нибудь, пожалуйста, скажите мне, что я делаю не так. Я также открыл файл .svg в notepad ++ и там написано: font-family = "Skia-Regular", но все же шрифт не Skia Regular. Любая помощь будет оценена. Спасибо

Изображение также прикреплено для справки

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

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

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

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

Чтобы преодолеть проблему рендеринга шрифтов, вам необходимо скопировать код SVG из Illustrator и изменить имя шрифта, чтобы оно соответствовало имени шрифта, установленного в вашей системе. (Например: имя шрифта в коде SVG, которое от Illustrator «Arial-Regular», но имя шрифта, установленного в вашей системе, «Arial Regular». Здесь вам нужно будет изменить код, чтобы Font-Family назывался «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/