От автора: адаптивный текст можно сделать с помощью vw единиц измерения, однако из-за отсутствия свойств max и mix-font-size в CSS вам придется добавить целый набор медиа запросов, которые будут контролировать отображение текста на больших экранах и экранах мобильных устройств. Vw текст находится между двух огней, зажатый медиа запросами.
SVG же хоть и имеет много ограничений, связанных с текстом, но он отлично подходит под баннеры для домашних страниц. Есть несколько способов создать такой текст:
Инлайновый SVG текст
Лучший способ добавить заголовок страницы в SVG это сделать SVG частью этой страницы:
|
1 2 3 4 5 |
<header> <svg xmlns="//www.w3.org/2000/svg" viewBox="0 0 285 80"> <text x="0" y="66">Kauai</text> </svg> </header> |
|
1 2 3 4 5 6 7 8 9 10 11 |
header { width: 80%; margin: 0 auto; } svg text { font-family: sans-serif; text-transform: uppercase; font-weight: 900; font-size: 90px; fill: blue; } |
SVG должен автоматически подгоняться под размер контейнера: чтобы текст был правильно спозиционирован, скорее всего, понадобится настроить viewBox, font-size и x значения (если на время добавить к SVG свойства border или background-color, будет легче определить размер элемента).
Обратите внимание, что font-size в SVG относится к viewBox, т.е. значение шрифта будет изменяться при изменении окна браузера. Также не забывайте, что цвет элемента text задается через fill, а не color. У данного метода есть несколько преимуществ из-за того, что он инлайновый:
SVG может использовать любой подключенный шрифт на странице или из стилей.
Данный текст индексируется, редактируется, его моно копировать и он становится доступным: он регистрируется и читается со страницы как любой другой текст.
Можно пойти еще дальше и сделать текст редактируемым, как показано в начале статьи.
SVG текст как изображение со ссылкой
Код SVG можно сохранить в файл и подключить изображение со ссылкой на него в HTML:
|
1 2 3 |
<header> <img src="waves.svg" alt="Waves"> </header> |
Можно добавить адаптивности изображению, сделав его обтекаемым и гибким. Однако необходимо учесть несколько факторов:
SVG файл по ссылке ненадежно работает с кастомными шрифтами.
Текст доступен для поиска, но только в контексте SVG. Скопировать его нельзя.
Текст становится недоступным. Компенсировать можно с помощью атрибута alt.
Разбитый SVG текст
Существует много ситуаций, когда SVG текст не может быть сохранен как текст, а должен быть разбит на части и экспортирован отдельными SVG путями (в Adobe Illustrator: Type / Create Outlines). Хороший пример:
В таком случае можно не использовать подключаемые шрифты, но также пропадает возможность легкого редактирования SVG. Также если не предпринять следующие шаги, то полностью пропадает SEO и доступность:
Если SVG идет как изображение со ссылкой, необходимо добавить атрибут alt
Если используется инлайновый SVG, то необходимо добавить тег title
Обратите внимание, что в тексте выше используются SVG фильтры, а значит, в текущей версии Safari данный текст отображаться не будет. В следующей статье я затрону эту тему более подробно.
Источник: //thenewcode.com/
Редакция: Команда webformyself.
