Как сделать адаптивный текст для баннера домашней страницы на SVG

Как сделать адаптивный текст для баннера домашней страницы на SVG

От автора: адаптивный текст можно сделать с помощью vw единиц измерения, однако из-за отсутствия свойств max и mix-font-size в CSS вам придется добавить целый набор медиа запросов, которые будут контролировать отображение текста на больших экранах и экранах мобильных устройств. Vw текст находится между двух огней, зажатый медиа запросами.

SVG же хоть и имеет много ограничений, связанных с текстом, но он отлично подходит под баннеры для домашних страниц. Есть несколько способов создать такой текст:

Инлайновый SVG текст

Лучший способ добавить заголовок страницы в SVG это сделать SVG частью этой страницы:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

SVG должен автоматически подгоняться под размер контейнера: чтобы текст был правильно спозиционирован, скорее всего, понадобится настроить viewBox, font-size и x значения (если на время добавить к SVG свойства border или background-color, будет легче определить размер элемента).

Обратите внимание, что font-size в SVG относится к viewBox, т.е. значение шрифта будет изменяться при изменении окна браузера. Также не забывайте, что цвет элемента text задается через fill, а не color. У данного метода есть несколько преимуществ из-за того, что он инлайновый:

SVG может использовать любой подключенный шрифт на странице или из стилей.

Данный текст индексируется, редактируется, его моно копировать и он становится доступным: он регистрируется и читается со страницы как любой другой текст.

Можно пойти еще дальше и сделать текст редактируемым, как показано в начале статьи.

SVG текст как изображение со ссылкой

Код SVG можно сохранить в файл и подключить изображение со ссылкой на него в HTML:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Можно добавить адаптивности изображению, сделав его обтекаемым и гибким. Однако необходимо учесть несколько факторов:

SVG файл по ссылке ненадежно работает с кастомными шрифтами.

Текст доступен для поиска, но только в контексте SVG. Скопировать его нельзя.

Текст становится недоступным. Компенсировать можно с помощью атрибута alt.

Разбитый SVG текст

Существует много ситуаций, когда SVG текст не может быть сохранен как текст, а должен быть разбит на части и экспортирован отдельными SVG путями (в Adobe Illustrator: Type / Create Outlines). Хороший пример:

В таком случае можно не использовать подключаемые шрифты, но также пропадает возможность легкого редактирования SVG. Также если не предпринять следующие шаги, то полностью пропадает SEO и доступность:

Если SVG идет как изображение со ссылкой, необходимо добавить атрибут alt

Если используется инлайновый SVG, то необходимо добавить тег title

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

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree