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

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

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

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

Если вы задаете тип с помощью единиц 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.