Подгонка текста к контейнеру

Подгонка текста к контейнеру

От автора: есть несколько способов того, как осуществляется подгонка текста, чтобы он заполнял контейнер. Существуют различные технологии, которые мы можем применить, и разные соображения, которые нужно принять во внимание при использовании этих технологий. Давайте перечислим их.

Магическое число в единицах окна просмотра

Если вы задаете тип с помощью единиц vw (ширина окна просмотра), вы можете найти точное число, при котором текст очень близко примыкает к границам контейнера и не разбивается при изменении размера. Я бы назвал это магическим числом.

В этом случае font-size: 25.5vw; работает вплоть до ширины окна просмотра 320 пикселей, но все равно ломается на меньших экранах.

Это своего рода менее экзотическая версия гибкой типографики, которая включает в себя более широкий диапазон единиц окна просмотра и минимальных / максимальных размеров.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

FitText

Действующий FitText Дейва Руперта также подойдет. Вам все равно нужны магические числа, чтобы получить размер, подходящий для любого конкретного случая:

FitText без jQuery

Если вы не используете jQuery, есть один варианты. Список репозиотриев:

non-jQuery FitText от @adactio

Angular.js FitText.js от @patrickmarabeas

AMP-HTML FitText

FitText UMD от @peacechen

Пример первого:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

textFit

Поменяйте слова местами в FitText, и вы получили textFit! Это другая библиотека JavaScript, которая регулирует размер шрифта, чтобы он соответствовал контейнеру. Насчет нее есть предостережение: textFit предназначена для двух измерений. Таким образом, вам нужна ширина и высота элемента, чтобы она работала.

fitty

fitty во многом похожа на FitText в том, как она изменяет размер типа, чтобы максимизировать его только горизонтально, но на самом деле, кажется, для нее не нужно никаких магических чисел.

TextFill

TextFill основана на jQuery и для нее нужна ширина, высота и установленный максимальный размер шрифта. Вот базовая демо, над которой мы работали:

FlowType

FlowType — это своего рода программа, предназначенная для работы со всем текстовым документом, с одновременным изменением его размера, с минимальными и максимальными размерами окна просмотра. Но вы можете применять ее к нужному диапазону. Вы также должны применять магическое число, чтобы получить то, что вам нужно.

Просто используйте SVG

При width: 100% и viewBox, SVG будет полноразмерным блоком, который изменяется при изменении соотношения сторон. Довольно аккуратный прием! Чтобы установить тип, вам понадобятся магические числа, чтобы получить правильный viewBox и правильно растянуть текст — но это можно сделать не применяя никакие другие зависимости, так же как при использовании единиц окна просмотра.

Автор: Chris Coyier

Источник: https://css-tricks.com/

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки:

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

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

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

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