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


24

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

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

Ответы:


31

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

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

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


2
Вторая часть понятна. Не могли бы вы объяснить первую часть, как мне «развернуть» текст?
Rizwan606

5
@ Rizwan606 Вы выбираете текст с помощью инструмента выделения и нажимаете меню «Объект», и там вы нажимаете «Развернуть» (он преобразует текст в фигуры), в качестве альтернативы вы выбираете текст, а затем щелкаете правой кнопкой мыши и выбираете «Создать контуры»
Ilan

5
Чтобы уточнить этот ответ, вам не нужно делать оба. Любой метод будет работать независимо.
Саймон Вудсайд

⚙️ (Расширенные настройки для экспортируемых типов файлов) → SVG → Шрифт для «Преобразовать в контуры».
Константин Ван,

9

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

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

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

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


1
Это именно так! Illustrator использует имена PostScript для шрифтов, когда вы выполняете Файл> Сохранить и выбираете SVG. В итоге вы получаете «MyriadPro-Regular» вместо «Myriad Pro», как и следовало ожидать, и ваш браузер не работает с именами PostScript, как это делает Illustrator. Обходной путь должен использовать File> Export для сохранения SVG, поскольку он будет экспортировать правильное имя семьи вместо имени PostScript.
Майкл Томпсон

@ Майкл Томпсон, когда я выбираю «Файл»> «Экспорт», SVG не является одним из вариантов. Я использую CS5. Это опция в более ранних / поздних версиях?
Макс Старкенбург

@MaxStarkenburg: меню экспорта сильно меняется между версиями. В более новых версиях существует три способа сохранения / экспорта в SVG: Файл> Сохранить как> (выберите тип SVG); Файл> Экспорт> Экспортировать как ...> (выберите тип SVG) и Файл> Экспорт для экранов> (добавить формат SVG).
Майкл Томпсон

4

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

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


Да, я тестирую на том же компьютере, на котором я создаю файл SVG. И не могли бы вы поправить меня, если я ошибаюсь. Я взял вашу первую часть ответа, так как мне нужно указать конкретный путь к файлу .ttf шрифта Skia Regular в свойстве Font-Family?
Rizwan606

Браузер должен сопоставить имя гарнитуры с установленным шрифтом, так что «нет», вы не дадите ему путь к ttf. Ссылка аналогична синтаксису css font-face, который допускает разделенный запятыми список стилей семейства шрифтов. Браузер может идентифицировать имя шрифта по-разному.
Горацио

Обратите внимание, что для логотипов и распространяемых материалов такого рода (pdfs и т. Д.), Где важен шрифт, рекомендуется встроить шрифт или преобразовать его в пути. Таким образом, разрешение этой ссылки не может быть хорошим решением, поскольку вы полагаетесь на то, что сторонние
поставщики

2

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

  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;}


1
Этот ответ слишком лаконичен. Я даже не могу сказать, относится ли это к файлу SVG или какому-то другому решению ...
jiggunjer

1

Скорее всего, на вашем компьютере нет шрифта семейства шрифтов (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/

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.