Шрифт Typekit в иконке SVG

Я пытаюсь добиться того, чтобы мой логотип правильно отображался на моем веб-сайте. Я создал иконку SVG в Illustrator со шрифтом из Adobe Typekit, это Proxima Nova. Значок SVG с текстом в нем правильно отображается в Chrome, а не в Firefox или любом другом мобильном браузере.

У кого-нибудь были подобные проблемы раньше?

Ответы (2)

Рекомендуется преобразовывать все шрифты в контуры при экспорте в SVG, в противном случае шрифт необходимо установить в ОС пользователя. Поскольку Proxima Nova не включен ни в одну библиотеку шрифтов ОС, браузер использует другое стандартное семейство шрифтов. Только несколько браузеров поддерживают шрифты SVG (см. здесь ), поэтому он будет отображать другой шрифт, даже если в вашей ОС установлен Proxima Nova.

Чтобы преобразовать шрифт, выберите его convert to outlineв диалоговом окне сохранения (см. изображение; извините за немецкий).

Таким образом, ваш логотип должен корректно отображаться в каждом браузере.

введите описание изображения здесь

Ваша ссылка «caniuse» относится к шрифтам SVG, а не к тексту в SVG.
@Code 3, это сработало, спасибо за ваш ответ!

Преобразовав текст в контур, он перестанет быть текстом, и поисковые системы не смогут индексировать его содержимое (пока не смогут интерпретировать контуры, что, вероятно, грядет). Хотя SVG будет поддерживать веб-шрифты через CSS, в настоящее время это недоступно для Typekit, который зависит от встроенного фрагмента JavaScript на веб-странице. На данный момент это выглядит как программная задача; кажется, есть плагин jQuery, который поможет вам больше всего, если не все: https://github.com/willemvb/svg-typekit

Хорошее замечание о SEO. Если есть место, есть ли какие-либо недостатки в отдельном наличии второго набора непреобразованного текста того же цвета, что и фон (таким образом, он будет читаем машиной, но не людьми)?
Шрифт Typekit в иконке SVG
СпросиСетьПолитика конфиденциальности1y, 0v