Простое решение, как получить заголовок, отличный от основного текста, не подключая дополнительных шрифтов и используя только шрифт сайта.
Для реализации применяется CSS-свойство transform: scaleY(), которое растягивает или сужает буквы, придавая шрифту новый вид.
Пример:
Заголовок ниже можно редактировать. Кликните по нему и введите свой текст.
Шрифт в CSS не указывается: подразумевается, что используется шрифт сайта. В этом блоге — Commissioner. Остальные шрифты в демо подключены только для наглядности.
Заголовки, к которым применяются стили имеет класс .scale-title
Настройки:
Шрифт:
Размер font-size:
40pxМасштаб scaleY:
1.20Пространство между строками line-height:
1.1JS:
Скрипт нужен, чтобы подогнать высоту заголовка под любое кол-во строк
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function fitScaleTitle() { document.querySelectorAll('.scale-title').forEach(function(el) { el.style.height = 'auto'; var transform = getComputedStyle(el).transform; var scaleY = 1; if (transform && transform !== 'none') { var m = transform.match(/matrix\(([^)]+)\)/); if (m) { scaleY = parseFloat(m[1].split(',')[3]); } } el.style.height = (el.offsetHeight * scaleY) + 'px'; }); } fitScaleTitle(); window.addEventListener('resize', fitScaleTitle); |
CSS:
Обратите внимание:
Если для заголовков нужны разные размеры и масштабирование, добавьте к .scale-title дополнительный класс:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.scale-title { font-size: 40px; font-weight: 500; text-transform: none; line-height: 1.15; margin: 20px 0; transform: scaleY(0.50); transform-origin: center top; } .scale-title.h2 { font-size: 30px; transform: scaleY(1.50); } |
Смотрите также:
Варианты стилизации кнопок button и input, а также ссылок
5 вариантов различных частиц, которые разлетаются в разные стороны по клику на кнопке
Варианты оформления закрывающих кнопок (close button) на CSS
Добавить комментарий: