Отзывчивый размер шрифта. Масштабирование шрифтов по ширине контейнера

Уверен, что никому не нужно объяснять почему сайты должны быть гибкими и адаптивными. Все используют проценты и медиа-запросы в своей верстке. Сейчас это уже стандарт.

Но типографика до недавнего времени не была столь гибкой. Все что мы могли - изменять размеры шрифта от брейкпоинта к брейкпоинту. В таком случае мы получали скорее адаптивную типографику нежели отзывчивую. Для каждого медиа-запроса нужно задавать свои значения. Можно конечно использовать компонентный подход с относительными размерами шрифта, что может существенно ускорить процесс редактирования, но принципиально это ничего не меняет. При перемещении компонента в другое место нужно будет опять пробегать по всем медиа запросам и подставлять новые значения.

Но потом появились они - vw , vh , vmin , vmax - единицы измерения, которые базируются на viewport. У нас появился шанс на отзывчивую типографику.

Коротко о viewport-зависимых единицах

100vw равно ширине (100vh - высоте) экрана в пикселях (или будет приведено к другим величинам если использовать в calc() ). 100vmax - равно большему из пары высота/ширина, 100vmin - меньшему. Сразу же начали появляться рецепты использования этих чудо величин в типографике.

Но в таком виде их сложно контролировать. Иногда попадались рецепты с использованием каких-то магических процентных величин. Но меня не устраивал вариант разбираться откуда они, а потом считать или подбирать вручную их для получения нужных мне размеров в моих условиях.

Задача

Хотелось иметь универсальный рецепт, который позволял бы задавать минимальное и максимальное значения для размера шрифта, да еще и привязать эти цифры к конкретным размерам viewport. Например, при ширине экрана в 480px иметь ровно 16px , а при 1280px - 24px .

Путь к решению

Вспомнив курс школьной математики пришел к выводу что моя задача не что иное, как уравнение прямой проходящей через 2 точки. Первая точка - меньшая ширины экрана и размер шрифта на ней, вторая - бОльшая ширина и соответствующий ей размер шрифта.

На оси X - ширина окна браузера, на оси Y - наш размер шрифта. Получаем уравнение с двумя неизвестными:

y - наш неизвестный размер шрифта, x - текущий размер экрана. x 1 - минимальное значение шрифта, x 2 - максимальное значение шрифта. y 1 и y 2 минимальное и максимальные значение ширины экрана соответственно.

А теперь самое интересное: имея CSS функцию calc() и текущее значение вьюпорта благодаря vw можно получить динамический размер шрифта:

font-size: calc((100vw - Vmin)/(Vmax - Vmin) * (Fmax - Fmin) + Fmin);

Эту формулу уже можно использовать в чистом CSS. Только нужно помнить, что при операциях умножения/деления хотя бы один из аргументов должен быть без единиц измерения, а при сложение/вычитании - оба с единицами. Подставив наши значения получим рабочий вариант (обратите внимание на использование единиц измерения):

font-size: calc((100vw - 480px)/(1280 - 480) * (24 - 16) + 16px);

Единицы измерений можно использовать любые, главное, чтобы они совпадали. Тоже самое, только в rem :

font-size: calc((100vw - 30rem)/(80 - 30) * (1.5 - 1) + 1rem); Используем Sass/SCSS

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

Коеффициенты k и b можно получить из уравнения прямой по двум точкам:

Получим функцию:

@function calcFluidFontSize($f-min, $f-max, $v-min, $v-max) { $k: ($f-max - $f-min)/($v-max - $v-min); $b: $f-min - $k * $v-min; $b: $b * 1px; @return calc(#{$k} * 100vw + #{$b}); } .fluid-font-size { font-size: calcFluidFontSize(16, 48, 480, 1280); }

В случае, если мы хотим иметь возможность использовать не только px но и другие единицы измерений, можно передавать их одним из параметров:

@function calcFluidFontSize($f-min, $f-max, $v-min, $v-max, $units: px) { $k: ($f-max - $f-min)/($v-max - $v-min); $b: $f-min - $k * $v-min; $b: $b + $units; @return calc(#{$k} * 100vw + #{$b}); } .fluid-font-size { font-size: calcFluidFontSize(1, 3, 30, 80, rem); }

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

@function strip-unit($number) { @if type-of($number) == "number" and not unitless($number) { @return $number / ($number * 0 + 1); } @return $number; } @function calcFluidFontSize($f-min, $f-max, $w-min, $w-max, $units: px) { $f-min: strip-unit($f-min); $f-max: strip-unit($f-max); $w-min: strip-unit($w-min); $w-max: strip-unit($w-max); $k: ($f-max - $f-min)/($w-max - $w-min); $b: $f-min - $k * $w-min; $b: $b + $units; @return calc(#{$k} * 100vw + #{$b}); } Расширяем возможности нашей функции

Функцию для вычисления размера шрифта мы имеем. Теперь на ее основе можно создать миксин, который можно расширять как угодно.

Например, мы хотим фолбек для старых браузеров:

@mixin fluidFontSize($f-min, $f-max, $w-min, $w-max, $fallback: false) { @if ($fallback) { font-size: $fallback; } font-size: calcFluidFontSize($f-min, $f-max, $w-min, $w-max, px); } .fluid-font-size { @include fluidFontSize(16px, 24px, 480px, 1280px, 18px); }

Теперь можно в качестве фолбека передавать оптимальный размер шрифта на случай, когда vw не поддерживается.

Можно ограничить размеры шрифта нашим минимальным и/или максимальным значением:

@mixin fluidFontSize($f-min, $f-max, $w-min, $w-max, $fallback: false) { font-size: $f-min; @media (min-width: $w-min) { @if ($fallback) { font-size: $fallback; } font-size: calcFluidFontSize($f-min, $f-max, $w-min, $w-max, px); } @media (min-width: $w-max) { font-size: $f-max; } } .fluid-font-size { @include fluidFontSize(16px, 24px, 480px, 1280px, 18px); }

Теперь при ширине экрана меньше 480px шрифт всегда будет 16px , после 480 он станет резиновым, а после 1280px всегда будет 24px .

Результат

Мы получили базовую функцию, которая выполняет весь основной функционал:

@function calcFluidFontSize($f-min, $f-max, $w-min, $w-max, $units: px) { $f-min: strip-unit($f-min); $f-max: strip-unit($f-max); $w-min: strip-unit($w-min); $w-max: strip-unit($w-max); $k: ($f-max - $f-min)/($w-max - $w-min); $b: $f-min - $k * $w-min; $b: $b + $units; @return calc(#{$k} * 100vw + #{$b}); }

Для ее расширения использовались миксины, с помощью которых можно сделать фоллбеки, ограничения, конвертацию единиц измерения и многое другое. Поиграться со всем этим можно на codepen . Если Вы не хотите использовать Sass вы найдете способ вычислений на чистом CSS.

Это точно не то, что спрашивает ОП, но может сделать кого-то днем. Этот ответ не просто кормить с ложечки и нуждается в некоторых исследованиях для разработчиков.

Наконец-то я пришел, чтобы получить чистое CSS-решение для этого, используя calc() с разными модулями. Вам понадобится некоторое базовое математическое понимание формул, чтобы выработать выражение для calc() .

Когда я решил это, мне нужно было получить отзывчивый заголовок на всю ширину страницы с некоторыми дополнениями в DOM. Я буду использовать мои значения здесь, замените их своими.

Математике

Тебе понадобится:

в некотором окне просмотра я корректировал соотношение, я использовал 320px, таким образом, я получил 24px в высоту и 224px в ширину, поэтому соотношение составляет 9.333... или 28/3
ширина контейнера, у меня было padding: 3em и полная ширина, так что это 100wv - 2 * 3em

X - ширина контейнера, поэтому замените его собственным выражением или измените значение, чтобы получить полностраничный текст. R - это соотношение, которое у вас будет. Вы можете получить его, настроив значения в некотором окне просмотра, проверив ширину и высоту элемента и заменив их своими собственными значениями. Кроме того, это width/heigth ;)

X = 100vw - 2 * 3em = 100vw - 6em r = 224px/24px = 9.333... = 28 / 3 y = x / r = (100vw - 6em) / (28 / 3) = (100vw - 6em) * 3 / 28 = (300vw - 18em) / 28 = (75vw - 4.5rem) / 7

И взрыв! Это сработало! я написал

Font-size: calc((75vw - 4.5rem) / 7)

в мой заголовок, и он корректно корректируется в каждом окне просмотра.

Но как это работает?

Нам нужны некоторые константы здесь. 100vw означает полную ширину области просмотра, и моей целью было создать полноразмерный заголовок с некоторыми отступами.

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

Заключение

Интересно, почему никто не понял этого, а некоторые люди даже говорят, что с CSS невозможно было бы повозиться. Мне не нравится использовать Javascript для настройки элементов, поэтому я не принимаю JS или даже ответы JQuery, не копая больше. В общем, хорошо, что это выяснили, и это один из шагов к реализации чистого CSS в дизайне веб-сайтов.

Я прошу прощения за любое необычное соглашение в моем тексте, я не являюсь носителем английского языка, а также совершенно новичок в написании SO ответов.

Изменить : следует также отметить, что у нас есть злые полосы прокрутки в некоторых браузерах. Например, при использовании Firefox я заметил, что 100vw означает полную ширину области просмотра, простирающуюся под полосой прокрутки (там, где содержимое не может расширяться!), Поэтому текст полной ширины должен быть аккуратно размечен и желательно тестироваться на многих браузерах и устройствах.

Коротко о viewport-зависимых единицах

Задача

Путь к решению

На оси X - ширина окна браузера, на оси Y - наш размер шрифта. Получаем уравнение с двумя неизвестными:

font-size: calc((100vw - Vmin)/(Vmax - Vmin) * (Fmax - Fmin) + Fmin);

font-size: calc((100vw - 480px)/(1280 - 480) * (24 - 16) + 16px);

Единицы измерений можно использовать любые, главное, чтобы они совпадали. Тоже самое, только в rem :

font-size: calc((100vw - 30rem)/(80 - 30) * (1.5 - 1) + 1rem); Используем Sass/SCSS

Коеффициенты k и b можно получить из уравнения прямой по двум точкам:

Получим функцию:

Например, мы хотим фолбек для старых браузеров:

Теперь можно в качестве фолбека передавать оптимальный размер шрифта на случай, когда vw не поддерживается.

Можно ограничить размеры шрифта нашим минимальным и/или максимальным значением:

Результат

Мы получили базовую функцию, которая выполняет весь основной функционал:

Доброго времени суток, верные подписчики и гости моего обучающего блога. В сегодняшней публикации мы разберем с вами Bootstrap размер шрифта, а именно как создать адаптивный шрифт.

Я расскажу, какие элементы управления присутствуют в фреймворке для редактирования текста, каким образом видоизменяется текстовый контент при масштабировании и как сделать так, чтобы размер символов изменялся вместе с изменением размеров окна. Как обычно, я приведу примеры кода. А теперь за дело!

Все о Bootstrap Typography

Наиболее интересные для текущей темы являются . lead и .pre-scrollable . Их описание я поместил в таблицу.

При том что в Bootstrap предусмотрена адаптивность текста и к тому же перечисленные классы добавляют некоторые возможности подгонки текста под размеры дисплеев, это все равно не обеспечивает адаптивного шрифта.

Решение найдено!

Для выхода из сложившейся ситуации в css3 было найдено решение в виде таких размерностей, как vw , vh , vmin и vmax . С их помощью шрифт изменяется вместе с масштабированием экрана. При чем по разным координатным осям.

Для сравнения рассмотрите пример и проанализируйте соотношение размеров предложений и окна.

Пример для сравнения Первый заголовок Второй заголовок Третий заголовок Четвертый заголовок

Теперь и вы владеете базовыми навыками подгонки текста под размеры дисплея. Если кто-то из вас желает расширить свои знания, то подписывайтесь на обновления моего блога. Буду очень благодарен, если вы поделитесь ссылкой и со своими знакомыми. До новых встреч!

» стала поводом для написания сегодняшнего поста. Суть очень схожа и речь здесь пойдет про размер шрифта.

Задача — реализовать динамическое изменение размера шрифта сайта в зависимости от разрешения экрана, т.е. размера окна браузера.

Прежде чем приступить к описанию решения, хочу обозначить два момента :

Лично для меня полезность данной штуки весьма сомнительна , и я скорее бы рассматривал такую возможность просто в качестве ознакомления. А вот Сергей, например, эту технику давно хотел применить на практике и видит в ней смысл. Поэтому, возможно, кому-нибудь еще эта информация также пригодится.

Решение довольно простое, работает на моем любимом jQuery, но использование этого фреймворка только ради осуществления данной задачи — не очень разумно , поскольку один лишь фреймворк «весит» под 60 Кб, а сам скрипт при этом состоит из всего лишь 10 строк. Я полагаю, что на нативном JavaScript скрипт, реализующий то же самое, будет значительно меньшего размера.

Итак, приступим.

Сначала я подробно опишу работу jQuery-скрипта, а затем объясню, как его применить к той или иной части веб-сайта.

jQuery

За точку отсчета я взял ширину в 1000 пикселей. Как правило, это минимальная ширина, под которую верстаются сайты. Заносим этот показатель в переменную:

var width = 1000;

Теперь устанавливаем минимальный размер шрифта в пикселях, ниже которого он не будет уменьшаться:

var bodyWidth = $("html").width();

Определяем коэффициент, на который будет умножаться базовый (минимальный) размер шрифта в зависимости от размера окна браузера. Цифру получаем путем деления ширины хтмл-документа на базовую (минимальную) ширину. Т.е., к примеру, если ширина окна браузера составляет 1600 пикселей, то получим коэффициент 1,6.

var multiplier = bodyWidth / width;

Выполняем условие: если ширина хтмл-документа больше базовой ширины, тогда размер шрифта умножаем на коэффициент, округляя полученный результат до целого числа:

if ($("html").width() >= width) fontSize = Math.floor(fontSize * multiplier);

Теперь полученный скорректированный размер шрифта применяем к тегу :

$("body").css({fontSize: fontSize+"px"});

Все вышеописанные строки помещаем в функцию function fontSize() {} , затем запускаем эту функцию после загрузки хтмл-документа, а также после изменения размера окна браузера:

$(function() { fontSize(); }); $(window).resize(function() { fontSize(); });

Вот целиком код jQuery-скрипта, который получился у нас в итоге:

HTML

Рассмотрим применение вышеуказанного скрипта на примере 3-колоночного макета страницы, имеющего следующую структуру HTML-кода:

CSS

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

Все очень просто.

Во-первых , правой колонке мы просто-напросто устанавливаем свой фиксированный размер шрифта и высоту строки, и скрипт его не затронет:

#right { font-size: 12px; line-height: 18px; }

Во-вторых , левой колонке ставим чуть меньший размер шрифта:

#left { font-size: 0.9em; }

В-третьих , нужно либо у тега , либо у соответствующего блока указать высоту строки в em, чтобы она тоже изменялась динамически.

Если вы хотите менять размер шрифта только у конкретного блока, допустим, у #content , тогда будет логичнее в скрипте поменять body (в строке $("body").css({fontSize: fontSize+"px"});) на нужный идентификатор или класс.