Иногда нет времени или возможности верстать сложную типографику. Например, подогнанные дизайнером вручную заголовки с нестандартным шрифтом:
Верстать подобные штуки в целом муторно, добиться одинакового вида во всех браузерах почти нереально. А пользователю придётся ждать загрузки дополнительных файлов шрифта, чтобы увидеть красоту.
Можно сделать заголовок картинкой, но это плохо для поисковых роботов и программ чтения с экрана. Особенно когда речь о заголовке первого уровня h1, на который поисковики смотрят особенно внимательно.
<img class="fakeHeadingImg" src="./fake-heading.svg" alt="Красивый заголовок: переговоры и отношения с клиентами" aria-hidden="true">Трюк. Разместите поверх картинки визуально скрытый «честный» заголовок. Поставьте текст как можно точнее по картинке, чтобы выделение текста курсором выглядело адекватно.
<div class="fakeHeading">
<!-- По возможности используйте СВГ, он почти ничего не весит и не мылится при масштабировании -->
<img class="fakeHeadingImg" src="./fake-heading.svg" alt="Красивый заголовок: переговоры и отношения с клиентами" aria-hidden="true">
<h1 class="fakeHeadingHidden">
Переговоры <br>
и отношения <br>
с клиентами
</h1>
</div>.fakeHeading {
max-width: 100%;
position: relative;
overflow: hidden; /* На всякий случай, чтобы текст настоящего заголовка не протёк за пределы модуля */
}
.fakeHeadingImg {
display: block;
width: 100%;
}
.fakeHeadingHidden {
position: absolute;
top: 0;
left: 0;
font-size: 5vw;
/* Подгоняем текст по к картинке */
margin: 0;
text-transform: uppercase;
font-size: 12.2vw;
line-height: 1.05;
}
и отношения
с клиентами
И скройте текст, сделав его прозрачным.
<div class="fakeHeading">
<!-- По возможности используйте СВГ -->
<img class="fakeHeadingImg" src="./fake-heading.svg" alt="Красивый заголовок: переговоры и отношения с клиентами" aria-hidden="true">
<h1 class="fakeHeadingHidden">
Переговоры <br>
и отношения <br>
с клиентами
</h1>
</div>.fakeHeading {
max-width: 100%;
position: relative;
overflow: hidden; /* На всякий случай, чтобы текст настоящего заголовка не протёк за пределы модуля */
}
.fakeHeadingImg {
display: block;
width: 100%;
}
.fakeHeadingHidden {
position: absolute;
top: 0;
left: 0;
font-size: 5vw;
color: transparent;
/* Подгоняем текст по к картинке */
margin: 0;
text-transform: uppercase;
font-size: 12.2vw;
line-height: 1.05;
}
и отношения
с клиентами
Этот трюк иногда может сэкономить кучу времени и нервов, без потери качества страницы. А ещё может сэкономить деньги: веб‑лицензия на шрифт обычно дороже и заморочнее, чем десктопная.
Опасность. Используйте трюк исключительно для дублирования текста, содержащегося на картинке. Намеренное скрытие текста от пользователей называется гостингом (ghosting) и сурово наказывается поисковиками, вплоть до исключения сайта из поисковой выдачи.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.