Как сделать адаптивный шрифт css

Динамически адаптивный шрифт html/css

я верстаю макет сайта и нашёл в Интрнете формулу по которой шрифт сам подстраивается под размер экрана. Вот она font-size: calc(25px + (40 + 40 * 0.7) *(100vw — 320px) / 1170); 25px — это минимально возможный шрифт. 1170 — ширина котейнера. Нету смысла обьяснять всю формулу. Кому интересно, гляньте это видео https://www.youtube.com/watch?v=HJZP5QsrpXs. Суть вопроса: при измене шрифта line-height остаётся прежним. То есть при увеличенном шрифте текст наезжает на себя, а при уменьшении слишком большие отступы. У кого-то есть подобная формула для line-height .

Отслеживать
задан 6 дек 2021 в 8:57
7 3 3 бронзовых знака
Сделай на css медиа-запросы по основным брекпоинтам и пропиши font-size
6 дек 2021 в 11:21

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Очевидно, у вас line-height задан жестко в единицах. Нужно сделать line-height:normal, тогда он будет меняться вслед за размером шрифта.

Отслеживать
ответ дан 6 дек 2021 в 18:08
Anders Forsberg Anders Forsberg
96 3 3 бронзовых знака
или задать его в относительных единицах, например, 1.2 или 120%
7 дек 2021 в 0:17
Да , ты прав на счёт этого.
7 дек 2021 в 12:02

• javascript
• html
• css
• frontend
• scss

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

10 технологий для адаптивной верстки текста о которых вы могли не знать

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

Адаптивный LESS

Если вы используете препроцессор CSS – LESS, этот пример автоматически генерирует код, который будет красиво уменьшать текст на основе разрешения экрана.

Использование параметра VW(viewport)

В этом примере блок vw используется для автоматического форматирования текста в соответствии с шириной окна просмотра. И это фактически поддерживается (по крайней мере частично), вплоть до IE 11.

Текст в одну строку который всегда хорошо смотрится

Бывают случаи, когда дизайнеру нужно чтобы текст оставался на одной строке — независимо от размера экрана. Вы найдете несколько вариантов такого типа функций, включая этот пример, который использует Vue.js.

Одинаковые вертикальные отступы

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

Управление повторяющимися параметрами

Свойства CSS (так называемые «переменные») являются функцией «must-have», которую разработчику стоит использовать для оптимизации кода. Они работают подобно переменной в PHP или JavaScript, поскольку их можно вызвать в любое время и избавить вас от тонны повторения. Вот пример, который использует переменные вместе с функцией CSS calc для автоматического изменения размера текста.

Адаптивный текстовый слайдер

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

Еще один способ оставить текст на одной строке под размер экрана

В то время как мы ранее смотрели на пример, который сохранял текст в одной строке по размеру экрана, этот отличается тем, что при необходимости перемещает элементы в новую строку. Тем не менее, он все равно будет обеспечивать нужный вид текста Responsive Text Auto-scale text

Адаптивный SASS

Мы уже посмотрели на LESS, так что мы должны отдать SASS и некоторую любовь. Это обеспечивает очень плавный переход в размере текста при изменении области просмотра.

Адаптация от количества символов

Что делать, если вы хотите, чтобы ваш текст реагировал на количества символов в строке? Вот пример, который использует запросы элементов CSS, чтобы это произошло.

Итог:

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

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

Типография

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

На этой странице

Глобальные настройки

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

• Используйте собственный стек шрифтов, который выбирает лучший font-family для каждой ОС и устройства.
• Для более инклюзивной и доступной шкалы шрифтов мы предполагаем, что в браузере используется корневой размер шрифта font-size по умолчанию (обычно 16 пикселей), чтобы посетители могли настроить свои настройки браузера по умолчанию по мере необходимости.
• Используйте атрибуты $font-family-base , $font-size-base и $line-height-base в качестве нашей типографской основы, применяемой к .
• Установите глобальный цвет ссылки через $link-color и примените подчеркивание ссылки только к :hover .
• Используйте $body-bg , чтобы установить background-color для (по умолчанию #fff ).

Эти стили можно найти в _reboot.scss , а глобальные переменные определены в _variables.scss . Не забудьте установить $font-size-base в rem .

Заголовки

Доступны все заголовки HTML, от до .

Заголовок	Пример
h1. Заголовок Bootstrap
h2. Заголовок Bootstrap
h3. Заголовок Bootstrap
h4. Заголовок Bootstrap
h5. Заголовок Bootstrap
h6. Заголовок Bootstrap

h1>h1. Заголовок Bootstraph1> h2>h2. Заголовок Bootstraph2> h3>h3. Заголовок Bootstraph3> h4>h4. Заголовок Bootstraph4> h5>h5. Заголовок Bootstraph5> h6>h6. Заголовок Bootstraph6> 

Также доступны классы от .h1 до .h6 , когда Вы хотите соответствовать стилю шрифта заголовка, но не можете использовать связанный элемент HTML.

h1. Заголовок Bootstrap

h2. Заголовок Bootstrap

h3. Заголовок Bootstrap

h4. Заголовок Bootstrap

h5. Заголовок Bootstrap

h6. Заголовок Bootstrap

p class="h1">h1. Заголовок Bootstrapp> p class="h2">h2. Заголовок Bootstrapp> p class="h3">h3. Заголовок Bootstrapp> p class="h4">h4. Заголовок Bootstrapp> p class="h5">h5. Заголовок Bootstrapp> p class="h6">h6. Заголовок Bootstrapp>

Настройка заголовков

Используйте включенные служебные классы, чтобы воссоздать небольшой текст вторичного заголовка из Bootstrap 3.

Необычный заголовок дисплея С блеклым второстепенным текстом

h3> Необычный заголовок дисплея small class="text-muted">С блеклым второстепенным текстомsmall> h3>

Отображение заголовков

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

Отображение 1
Отображение 2
Отображение 3
Отображение 4
Отображение 5
Отображение 6

h1 class="display-1">Отображение 1h1> h1 class="display-2">Отображение 2h1> h1 class="display-3">Отображение 3h1> h1 class="display-4">Отображение 4h1> h1 class="display-5">Отображение 5h1> h1 class="display-6">Отображение 6h1> 

Отображаемые заголовки настраиваются с помощью карты Sass $display-font-sizes и двух переменных: $display-font-weight и $display-line-height .

$display-font-sizes: ( 1: 5rem, 2: 4.5rem, 3: 4rem, 4: 3.5rem, 5: 3rem, 6: 2.5rem ); $display-font-weight: 300; $display-line-height: $headings-line-height; 

Ведущий

Выделите абзац, добавив .lead .

Это ведущий абзац. Он выделяется из обычных абзацев.

p class="lead"> Это ведущий абзац. Он выделяется из обычных абзацев. p>

Строчные текстовые элементы

Стили для общих строчных элементов HTML5.

Вы можете использовать тег mark для выделения текста.

Эта строка текста должна рассматриваться как удаленный текст.

Эта строка текста считается неточной.

Эта строка текста будет отображаться как подчеркнутая.

Эту строку текста следует рассматривать как мелкий шрифт.

Эта строка выделена жирным шрифтом.

Эта строка выделена курсивом.

p>Вы можете использовать тег mark для mark>выделенияmark> текста.p> p>del>Эта строка текста должна рассматриваться как удаленный текст.del>p> p>s>Эта строка текста считается неточной.s>p> p>ins>Эта строка текста должна рассматриваться как дополнение к документу..ins>p> p>u>Эта строка текста будет отображаться как подчеркнутая.u>p> p>small>Эту строку текста следует рассматривать как мелкий шрифт.small>p> p>strong>Эта строка выделена жирным шрифтом.strong>p> p>em>Эта строка выделена курсивом.em>p>

Помните, что эти теги следует использовать в семантических целях:

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

Если Вы хотите стилизовать свой текст, Вы должны вместо этого использовать следующие классы:

• .mark будут применять те же стили, что и .
• .small будут применять те же стили, что и .
• .text-decoration-underline будут применять те же стили, что и .
• .text-decoration-line-through будут применять те же стили, что и .

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

Текстовые утилиты

Измените выравнивание, преобразование, стиль, толщину, высоту строки, оформление и цвет текста с помощью наших текстовых утилит и цветовых утилит.

Аббревиатуры

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

Добавьте к аббревиатуре .initialism , чтобы уменьшить размер шрифта.

p>abbr title="attribute">attrabbr>p> p>abbr title="HyperText Markup Language" class="initialism">HTMLabbr>p>

Цитаты

Для цитирования блоков контента из другого источника в Вашем документе. Оберните вокруг любого HTML как цитату.

Известная цитата, содержащаяся в элементе цитаты.

blockquote class="blockquote"> p>Известная цитата, содержащаяся в элементе цитаты.p> blockquote>

Название источника

Спецификация HTML требует, чтобы атрибуция цитаты размещалась за пределами . При указании авторства оберните Ваш в и используйте или элемент уровня блока (например,

) с классом .blockquote-footer . Не забудьте также заключить название исходной работы в .

Известная цитата, содержащаяся в элементе цитаты.

Кто-то, известный в названии источника

figure> blockquote class="blockquote"> p>Известная цитата, содержащаяся в элементе цитаты.p> blockquote> figcaption class="blockquote-footer"> Кто-то, известный в cite title="Source Title">названии источникаcite> figcaption> figure>

Выравнивание

При необходимости используйте текстовые утилиты, чтобы изменить выравнивание цитаты.

Известная цитата, содержащаяся в элементе цитаты.

Кто-то, известный в названии источника

figure class="text-center"> blockquote class="blockquote"> p>Известная цитата, содержащаяся в элементе цитаты.p> blockquote> figcaption class="blockquote-footer"> Кто-то, известный в cite title="Source Title">названии источникаcite> figcaption> figure>

Известная цитата, содержащаяся в элементе цитаты.

Кто-то, известный в названии источника

figure class="text-end"> blockquote class="blockquote"> p>Известная цитата, содержащаяся в элементе цитаты.p> blockquote> figcaption class="blockquote-footer"> Кто-то, известный в cite title="Source Title">названии источникаcite> figcaption> figure>

Списки

Без стиля

Удалите по умолчанию list-style и левое поле для элементов списка (только непосредственные дочерние элементы). Это применимо только к непосредственным дочерним элементам списка, то есть Вам нужно будет добавить класс также для любых вложенных списков.

• Это список.
• Это выглядит совершенно без стиля.
• Структурно это все-таки список.
• Однако этот стиль применяется только к непосредственным дочерним элементам.
• Вложенные списки:
  • не подвержены влиянию этого стиля
  • все равно покажет пулю
  • и иметь соответствующее левое поле

  ul class="list-unstyled"> li>Это список.li> li>Это выглядит совершенно без стиля.li> li>Структурно это все-таки список.li> li>Однако этот стиль применяется только к непосредственным дочерним элементам.li> li>Вложенные списки: ul> li>не подвержены влиянию этого стиляli> li>все равно покажет пулюli> li>и иметь соответствующее левое полеli> ul> li> li>В некоторых ситуациях это может пригодиться.li> ul>

  В линию

  Удалите маркеры списка и примените небольшое поле margin с помощью комбинации двух классов: .list-inline и .list-inline-item .

  • Это элемент списка.
  • И еще один.
  • Но они отображаются инлайновыми.

  ul class="list-inline"> li class="list-inline-item">Это элемент списка.li> li class="list-inline-item">И еще один.li> li class="list-inline-item">Но они отображаются инлайновыми.li> ul>

  Выравнивание списка описаний

  Выровняйте термины и описания по горизонтали с помощью предопределенных классов нашей сеточной системы (или семантических миксинов). Для более длительных сроков Вы можете по желанию добавить класс .text-truncate , чтобы обрезать текст многоточием.

  Списки описаний Список описаний идеально подходит для определения терминов. Термин

  И еще немного текста определения заполнителя.

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

  dl class="row"> dt class="col-sm-3">Списки описанийdt> dd class="col-sm-9">Список описаний идеально подходит для определения терминов.dd> dt class="col-sm-3">Терминdt> dd class="col-sm-9"> p>Определение термина.p> p>И еще немного текста определения заполнителя.p> dd> dt class="col-sm-3">Другой терминdt> dd class="col-sm-9">Это определение короткое, поэтому никаких лишних абзацев или чего-либо еще.dd> dt class="col-sm-3 text-truncate">Усеченный термин усеченdt> dd class="col-sm-9">Это может быть полезно, когда места мало. Добавляет многоточие в конце.dd> dt class="col-sm-3">Вложенностьdt> dd class="col-sm-9"> dl class="row"> dt class="col-sm-4">Список вложенных определенийdt> dd class="col-sm-8">Я слышал, Вам нравятся списки определений. Позвольте мне поместить список определений в Ваш список определений.dd> dl> dd> dl>

  Размеры адаптивного шрифта

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

  Sass

  Переменные

  В заголовках есть несколько переменных, определяющих размер и интервал.

  $headings-margin-bottom: $spacer * .5; $headings-font-family: null; $headings-font-style: null; $headings-font-weight: 500; $headings-line-height: 1.2; $headings-color: null; 

  Различные элементы типографики, описанные здесь и в Reboot, также имеют специальные переменные.

  $lead-font-size: $font-size-base * 1.25; $lead-font-weight: 300; $small-font-size: .875em; $sub-sup-font-size: .75em; $text-muted: $gray-600; $initialism-font-size: $small-font-size; $blockquote-margin-y: $spacer; $blockquote-font-size: $font-size-base * 1.25; $blockquote-footer-color: $gray-600; $blockquote-footer-font-size: $small-font-size; $hr-margin-y: $spacer; $hr-color: inherit; $hr-height: $border-width; $hr-opacity: .25; $legend-margin-bottom: .5rem; $legend-font-size: 1.5rem; $legend-font-weight: null; $mark-padding: .2em; $dt-font-weight: $font-weight-bold; $nested-kbd-font-weight: $font-weight-bold; $list-inline-padding: .5rem; $mark-bg: #fcf8e3; 

  Миксины

  Специальных миксинов для типографики нет, но Bootstrap действительно использует Адаптивный размер шрифта (RFS).

  • Разработан и построен с любовью в мире командой Bootstrap с помощью наших участников.
  • Код под лицензией MIT, документация CC BY 3.0.
  • Текущая версия v5.0.2.

  Как задавать размеры шрифта в вёрстке

  Продолжаем говорить о размерах в CSS. Мы уже разбирали пиксели, проценты и зависимость от окна браузера, а теперь посмотрим на особенности размеров шрифтов.

  Коротко о том, что уже было: пиксели и высота экрана

  Самый простой способ задать размер чего-нибудь на веб-странице — указать его в пикселях:

  Также можно указать размер в виде пропорций от ширины или высоты браузера. Например, чтобы размер шрифта был 1/10 от высоты окна. Необычно, но может быть интересно:

  Проценты и шрифты

  Ещё есть проценты, но с ними сложнее: нужно знать размеры родительского элемента, чтобы процентам было от чего отталкиваться. Например, если мы просто напишем font-size: 50%;, то браузер сделает так:

  1. Поищет в стилях, есть ли где-то точное указание размеров шрифта для этого или родительского элемента.
  2. Если есть — возьмёт 50 процентов от них.
  3. Если нет — возьмёт стандартный размер шрифта для этого элемента из своих настроек и уже от них посчитает 50%.

       /*задаём общие параметры для всей страницы*/ body 
  Привет, это журнал «Код»!
    

  

  Теперь добавим отдельный стиль для абзаца и в нём укажем, что размер текста должен быть 50%:

  

  А вот что будет, если мы удалим размер в пикселях из стиля body<> и дадим браузеру самому разобраться с размером:

  

  Так как мы не задали точные размеры, то браузер взял какой-то свой размер абзаца по умолчанию и посчитал 50% от этого стандартного размера. Получилось мелко и нечитаемо.

  Em — относительный размер шрифта

  Если неохота считать проценты или нужно, чтобы шрифт точно был в 2 раза больше или в 0,7 раз меньше обычного шрифта, используют em. Это то же самое, что проценты: font-size: 100% — это как font-size:1em .

       /*задаём общие параметры для всей страницы*/ body  
  Привет, это журнал «Код»!
   
  А это — статья про размеры шрифтов
   
  И здесь всё постоянно меняется
    

  

  Так же, как и с процентами, em — это относительные значения. Всё зависит от родительского элемента. В этом примере родительским элементом был общий размер для всей страницы, заданный в body<>. Но что, если мы вложим с помощью блоков абзацы друг в друга?

       /*задаём общие параметры для всей страницы*/ body  
   
  Привет, это журнал «Код»!
    
   
  Делаем шрифт побольше предыдущего
    
   
  А этот — поменьше своего предыдущего
   
   
   
    

  

  Размеры в эмах удобно использовать для вёрстки разных иерархических элементов, где каждый вложенный уровень должен по размеру быть меньше предыдущего. Чтобы каждый раз не считать размеры вручную, можно использовать одно и то же значение в em — а браузер сам уменьшит шрифт пропорционально вложенности.

  �� Em считается относительно текущего размера шрифта и пересчитывается при изменении размеров родительского шрифта. Это можно использовать для адаптивной вёрстки.

  Кроме em есть ещё rem — она считает размеры шрифта только относительно тех, которые заданы в блоке стилей html<>. Если этого блока нет или в нём ничего не написано — rem посчитает размер шрифта от стандартного значения в браузере. Отличие от em в том, что даже при вложенности друг в друга все значения будут считаться не относительно предыдущего блока, а относительно значения в html<>.

  Межстрочный интервал

  Помимо размера самих букв у текста есть параметр межстрочного интервала — это расстояние между нижними краями текста на каждой строке.

  Стандартное значение межстрочного интервала — normal. Это значит, что браузер спросит у шрифта, какое межстрочное расстояние тот предпочитает. Вам ни о чём думать не нужно:

  Интересно, что вся строка выше в целом бессмысленна, потому что она говорит браузеру «у текста абзацев должен быть стандартный размер и стандартный межстрочный интервал». На что браузер справедливо скажет: «Да я и так бы их сделал стандартными, не учи меня жить».

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

  Как адаптировать размер текста под размер экрана

  Допустим, дизайнер поручил нам сделать так, чтобы заголовки на странице меняли размер в зависимости от ширины экрана. Если экран широкий, то и заголовок должен быть большим. Если экран узкий — пусть будет компактным.

  Самый прямолинейный способ это сделать — задать размер в единицах vw. Например, 1vw — это 1% ширины экрана; 10vw — 10% ширины экрана. Если экран шириной 1000 пикселей, то 20vw — это 200 пикселей.

  Звучит неплохо, но может плохо выглядеть: смартфоны обычно очень узкие, а экраны компьютеров очень широкие, и разница в размере шрифта будет в 5–6 раз. И если, например, основной текст фиксированного размера, а заголовки должны менять размер, то на широких экранах заголовки будут мельче, чем основной текст.

        `   
  Привет, это журнал «Код»!
   
  Этот текст зависит от ширины экрана. Чем больше ширина — тем больше размер этого текста
    

  

  

  Второй вариант — использовать медиазапросы. Мы расскажем о них подробно в другой статье, а пока кратко: это когда мы можем накатывать разные стили на документ в зависимости от того, как этот документ отображается. Можно сказать: «Если экран шире 500 пикселей, используй вот такой размер шрифта; если шире 1000 пикселей — сякой; а если это не веб-страница, а версия для печати — вообще используй другой шрифт и размер».

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

  @media screen and (min-width: 601px) < h2 > @media screen and (max-width: 600px) < h2 >

  Читать:

  Текущая дата это какая