Существует несколько способов поместить некоторый текст в контейнер и иметь его размер для заполнения этого контейнера. Существуют различные технологии, которые мы можем использовать, и разные соображения, о которых нужно подумать. Давайте посчитаем пути.
Содержание статьи
Магия Число с единицами просмотра
Если вы установите тип с помощью единиц vw (ширина экрана), вы можете найти точное число, где текст очень близко подходит к контейнеру и не разбивается при изменении размера. Я бы назвал это волшебным числом.
В этом случае font-size: 25.5vw; работает вплоть до видового экрана 320 пикселей, но все равно будет ломаться намного ниже этого.
См. Текст, прикрепленный к пером, с помощью блоков видового экрана Крисом Койером (@chriscoyier) на CodePen.
Это своего рода менее экзотическая версия типографики с жидкостью, которая включает в себя больше разбрызгивания единиц видового экрана и минимальных / максимальных размеров.
FitText
FitText Дейва Руперта подходит для работы. Вам все еще нужно немного магического числа, чтобы получить размер, подходящий для любой конкретной работы:
См. Текст, связанный с пером, с помощью FitText от Криса Койера (@chriscoyier) на CodePen.
FitText без jQuery
Если вы не используете jQuery, есть варианты. Список из репо:
Пример первого:
См. Текст, связанный с пером, с помощью FitText (без jQuery) Криса Койера (@chriscoyier) на CodePen.
textFit
Поменяйте слова в FitText вокруг, и вы получили textFit! Это другая библиотека JavaScript, которая регулирует размер шрифта, чтобы он соответствовал тексту в контейнере. Здесь большое предостережение: textFit предназначен для двух измерений. Таким образом, вам понадобится ширина и высота на элементе, чтобы он мог это сделать.
См. Текст, связанный с пером, с текстом, написанным Крисом Койером (@chriscoyier) на CodePen.
Фитти
fitty больше похожа на FitText на то, что она изменяет тип, чтобы максимизировать только горизонтально, но на самом деле, похоже, не требует никаких магических чисел.
См. Текст, связанный с пером, с фитисом Криса Койера (@chriscoyier) на CodePen.
TextFill
TextFill основан на jQuery и требует ширины, высоты и настроенного максимального размера шрифта для работы. Вот базовое демо, над которым мы работали:
См. Текст, связанный с пером, с помощью TextFill от Криса Койера (@chriscoyier) на CodePen.
FlowType
FlowType — это своего рода программа, предназначенная для работы над целым документом текста, с одновременным изменением его размера, с минимальными и максимальными размерами видового экрана. Но вы можете охватить его, как хотите. Вы также применяете магическое число, чтобы получить то, что вам нужно.
См. Текст, связанный с пером, с FlowType Крисом Койером (@chriscoyier) на CodePen.
Просто используйте SVG
С ширина: 100% и viewBox SVG будет полноразмерной коробкой, которая изменяет размер с соотношением сторон. Довольно аккуратный трюк! Чтобы установить тип, вам понадобятся некоторые магические числа, чтобы получить viewBox в нужное место и нажать текст в нужное место — но это выполнимо с нулевыми зависимостями, как и демоверсия единиц просмотра.
См. Текст, связанный с пером, с помощью SVG Крисом Койером (@chriscoyier) на CodePen.
Загрузка...
