Доброго времени суток, верные подписчики и гости моего обучающего блога. В сегодняшней публикации мы разберем с вами Bootstrap размер шрифта, а именно как создать адаптивный шрифт.
Я расскажу, какие элементы управления присутствуют в фреймворке для редактирования текста, каким образом видоизменяется текстовый контент при масштабировании и как сделать так, чтобы размер символов изменялся вместе с изменением размеров окна. Как обычно, я приведу примеры кода. А теперь за дело!
Все о Bootstrap Typography
В изучаемом фреймворке есть целый раздел, выделенный под редактирование и форматирование текстового контента. Для начала стоит отметить, что некоторые параметры, установленные по умолчанию в Бутстрапе, несколько отличаются от стандартных установок в браузерах. По ходу статьи вы сами заметите какие именно.
Итак, в Bootstrap 3 по умолчанию выставлен шрифт размером в 14 пикселей и межстрочным интервалом в 1.428.
Присутствуют все 6 уровней заголовков при этом первый уровень равен 36px, а шестой – 12px.
Что касается тега small, то его отображение несколько отличается от привычного нам в html. В данном случае этот элемент используется для создания вторичного текста в более светлых тонах. Для анализа протестируйте строки кода:
1 2 3 4 | <div class="container"> <h1>Первый заголовок <small>вспомогательный текст</small></h1> <p>Содержание абзаца.</p> </div> |
Интересным тегом является <mark>. Текст, обрамленный в такой парный элемент, выглядит так, будто выделен хайлайтером.
<p>Предложение с <mark>важным</mark> словом.</p>
Не менее интересным, по моему мнению, является и элемент <abbr>. Как вы уже догадались, с его помощью можно расшифровывать аббревиатуры.
<p>Вчера был замечен <abbr title="Неопознанный летающий объект">НЛО</abbr> прямо над столицей.</p>
Для того чтобы выделить, например, комбинацию клавиш, можно использовать тег <kbd>:
<p>Используйте <kbd>ctrl + U</kbd> для открытия исходного кода веб-страниц.</p>
Помимо перечисленных инструментов управления текстом, существуют также и классы, которые расширяют возможности фреймворка.
Наиболее интересные для текущей темы являются .lead и .pre-scrollable. Их описание я поместил в таблицу.
Класс | Описание |
.lead | Выделяет некий параграф текста более крупным и жирным начертанием шрифта. При этом размер и толщина символов изменяется во время горизонтального масштабирования. |
.pre-scrollable | Добавляет горизонтальное скроллирование для объектов тега <pre> в зависимости от разрешения экрана. |
При том что в Bootstrap предусмотрена адаптивность текста и к тому же перечисленные классы добавляют некоторые возможности подгонки текста под размеры дисплеев, это все равно не обеспечивает адаптивного шрифта.
Решение найдено!
Для выхода из сложившейся ситуации в css3 было найдено решение в виде таких размерностей, как vw, vh, vmin и vmax. С их помощью шрифт изменяется вместе с масштабированием экрана. При чем по разным координатным осям.
Размерность | Описание |
vw | Изменения происходят на 1% в зависимости от ширины окна просмотра. |
vh | Размер шрифта меняется на 1% в зависимости от высоты веб-страницы. |
vmin | Изменение шрифта происходит по двум осям, однако в этом случае текст увеличивается до определенного момента, а уменьшается неограниченно. |
vmax | Аналогично предыдущему, однако увеличивается неограниченно, а уменьшается до определенного момента. |
Для сравнения рассмотрите пример и проанализируйте соотношение размеров предложений и окна.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html lang="en"> <head> <title>Пример для сравнения</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1 style="font-size: 4vmin">Первый заголовок</h1> <h1 style="font-size: 4vmax"> Второй заголовок </h1> <h1 style="font-size: 4vw"> Третий заголовок </h1> <h1 style="font-size: 4vh"> Четвертый заголовок </h1> </div> </body> </html> |
Теперь и вы владеете базовыми навыками подгонки текста под размеры дисплея. Если кто-то из вас желает расширить свои знания, то подписывайтесь на обновления моего блога. Буду очень благодарен, если вы поделитесь ссылкой и со своими знакомыми. До новых встреч!
Пока-пока!
С уважением, Роман Чуешов