Збереження типу шрифту у файлі SVG ілюстратора

Привіт, я новачок у ілюстраторі та створив зображення, яке використовує шрифт "Skia-Regular". Але коли я зберігаю це зображення у форматі .svg , воно змінює тип шрифту. І коли я відкриваю .svg файл формату в браузері, шрифт зовсім інший. Хто-небудь, будь ласка, скажіть мені, що я роблю не так. Я також відкрив .svg файл у блокноті ++, і він пише font-family = "'Skia-Regular", а також шрифт не є Skia Regular. Будь-яка допомога буде оцінена. Дякую

Зображення також додається для довідки

Якщо ви хочете бути впевнені, що текст матиме однаковий вигляд у кожному випадку -

По-перше, ви можете розгорнути текст перед збереженням як svg

По-друге, у шрифтовій частині діалогового вікна збереження можна натиснути "конвертувати в контур"

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

Щоб подолати проблему візуалізації шрифту, вам потрібно буде скопіювати SVG-код із Illustrator та змінити ім'я шрифту відповідно до імені шрифту, встановленого у вашій системі. (Напр .: ім'я шрифту в коді SVG, який від Illustrator "Arial-Regular", але назва шрифту, встановленого у вашій системі, є "Arial Regular". Тут вам потрібно буде змінити код, щоб сімейство шрифтів було "Arial Regular" ".)

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

Сподіваюся, це допомагає!

Як ви зазначали, шрифт - це посилання на файл шрифту, який може (а може і не бути) доступний системі, яка намагається відкрити svg. Рішення полягає в перетворенні вашого типу в контури, щоб криві зберігалися явно у файлі.

Щодо того, чому браузер може не знати про шрифт, на який ви намагаєтеся посилатися, це незрозуміло, оскільки я припускаю, що ви тестуєте на тому ж комп’ютері, який ви використовували під час створення файлу svg. Імовірно, що шрифт можна вибрати в Illustrator, але формально не встановлений на рівні ОС.

архів для Інтернету:

1. використовувати шрифти google.
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 для посилання на API шрифтів Google (але вигляд полягає в тому, що залежно від способу вбудовування ваших SVG-зображень на свій веб-сайт, це добре працює лише якщо ви використовуєте вбудований SVG та тег SVG)
2. Перетворіть ваші шрифти в шлях (це збільшує розмір вашого файлу і призводить до розмиття тексту, коли ви втратили ClearType візуалізацію)
3. Вставте шрифти у свій файл SVG за допомогою Nano

Більше про використання спеціальних шрифтів у SVG можна прочитати тут: https://css-tricks.com/using-custom-fonts-with-svg-in-an-image-tag/