От автора: есть несколько способов того, как осуществляется подгонка текста, чтобы он заполнял контейнер. Существуют различные технологии, которые мы можем применить, и разные соображения, которые нужно принять во внимание при использовании этих технологий. Давайте перечислим их.
Магическое число в единицах окна просмотра
Если вы задаете тип с помощью единиц vw (ширина окна просмотра), вы можете найти точное число, при котором текст очень близко примыкает к границам контейнера и не разбивается при изменении размера. Я бы назвал это магическим числом.
В этом случае font-size: 25.5vw; работает вплоть до ширины окна просмотра 320 пикселей, но все равно ломается на меньших экранах.
Это своего рода менее экзотическая версия гибкой типографики, которая включает в себя более широкий диапазон единиц окна просмотра и минимальных / максимальных размеров.
FitText
Действующий FitText Дейва Руперта также подойдет. Вам все равно нужны магические числа, чтобы получить размер, подходящий для любого конкретного случая:
FitText без jQuery
Если вы не используете jQuery, есть один варианты. Список репозиотриев:
Пример первого:
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.