У меня есть веб-шрифт, который я хотел бы отображать с помощью SVG вместо HTML. Причина этого в том, что я хочу отображать большой типографски красивый текст, и я не вижу никакого способа получить контроль над кернингом, который мне нужен, с визуализированным текстом HTML/CSS.
У меня есть шрифт (или, скорее, он бесплатный), и было бы легко отобразить его в виде растрового изображения и покончить с ним, но он очень большой, и я пытаюсь загрузить всю страницу менее чем за полминуты. во-вторых, поэтому я считаю, что SVG — это мой ответ.
У меня есть Photoshop, но у меня нет бюджета на Illustrator. Хотя, я думаю, я мог бы использовать пробную версию в краткосрочной перспективе - было бы неплохо иметь возможность редактировать и вносить изменения через месяц. Существуют ли какие-либо векторные инструменты, которые удовлетворяли бы мои потребности, просто для создания SVG из текста, чтобы я мог вручную настроить кернинг для отображения в Интернете?
Inkscape, безусловно, преобразует шрифты в контуры (выберите, затем Shift-Ctrl-C).
Стандартный формат сохранения — SVG — либо «Inkscape» (расширенный) SVG, либо «обычный» SVG.
Он также имеет редактор шрифтов SVG.
Кстати, я предполагаю, что этот CSS вам не подходит:
<span style="letter-spacing: 5px">Kerning</span>
Попробуйте Kern.js. который основан на Lettering.js (оба плагина jQuery):
Мы надеемся, что это даст вам контроль над кернингом без ущерба для SEO и доступности.
Обновлять:
Я только что узнал о kerning.js, который может предложить даже больше контроля, чем Kern.js:
http://endtwist.github.com/kerning.js/
Также на основе Lettering.js.
Попробуйте Inkscape — это альтернатива Illustrator с открытым исходным кодом. Я мало использовал его сам, но он начинался как редактор SVG, поэтому преобразование текста в пути и сохранение в формате SVG должно быть простым.
Inkscape на самом деле лучше работает с SVG, чем Illy. Illy делает забавные вещи при сохранении в формате SVG, в основном не соблюдает спецификации SVG. Используйте Illy для AI, но Inkscape — лучший выбор, если вы имеете в виду соответствие SVG.
Как уже говорилось, Inkscape — это инструмент, с которым можно работать. Но обратите внимание, что изображение SVG больше не является текстом. Хотя это нормально для отображения иллюстративного типа, вам, вероятно, понадобится реальный текст на вашем сайте из соображений SEO и доступности.
Вы изучали использование веб-шрифтов CSS? Это может быть приемлемым компромиссом.
Вот еще одна программа, которая отлично работает с SVG: iDraw в Apple Mac/App Store.
DA01