Как сделать чтобы шрифт уменьшался от размеров экрана css

Размер шрифта в зависимости от ширины блока

Два примера установки размера шрифта и его позиции в блоке относительно его ширины. Один на JS, если блок не во всю ширину экрана, другой на CSS, если во всю.

Изначально мы имеем картинку, на которой расположен в нужном месте текст, который не перекрывает определенные ее части.

Все величины у этой конструкции выставлены для размера блока в 1170 пикселей.

Пример с точными размерами:

Размер шрифта 48px

CSS

position : relative ;
.fontsize img < width : 100% ; .fontsize .text < width : 100% ; position : absolute ; font-family : 'Roboto' , sans-serif ; color : #337AB7 ; font-size : 48px ; left : 130px ;

HTML

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

Чтобы правильно изменять размер шрифта воспользуемся примером ниже, в котором используется небольшой JS

Пример с размерами через JS:

Размер шрифта 48px

HTML и CSS у нас остаются прежние (в CSS можно удалить лишнее, это свойства font-size , top и left , которые мы задаем через JS)

JS

function fontsize ( ) < let block = document . querySelector ( '.fontsize' ) ; let text = document . querySelector ( '.fontsize .text' ) ; let w = block . offsetWidth ; text . style . fontSize = w / 24 + "px" ; text . style . top = w / 38 + "px" ; text . style . left = w / 9 + "px" ; window . onload = fontsize ; window . onresize = fontsize ;

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

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

Пример с размерами на CSS, если ширина блока равна экрану:

Размер шрифта

HTML для этого примера остается прежним, JS нам не нужен, а размеры в CSS будет такими:

.fontsize .text < font-size : 4vw ; left : 12vw ;

Где размер текста и его позиция также устанавливаются на глаз на любом разрешении экрана.

Нравится 18
В закладки

• Опубликовано: 03.01.2021 / Обновлено: 03.03.2022
• Рубрики: Вкладки, блоки и списки, Тексты, ссылки и кнопки
• Метки: CSS, JavaScript
• 18474 просмотра

Смотрите также:

Оформление текста в SVG

Несколько вариантов оформления текста на основе векторной графики SVG

Капли воды на CSS

Капли воды для оформления фона блока или секции

Текст на размытом фоне

Наложение фильтра blur для размытия фона под текстом

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

Алексей: 03.01.2021 в 17:23

У меня пара вопросов
1 — почему на примере размер шрифта в 4vw показывается в пикселях
2 — зачем вообще нужен JS, когда можно всегда считать по этой ширине экрана?

Alexander: 03.01.2021 в 17:50

1 — пример не всегда у меня показывает тот код, который дается, иногда я его меняю для удобства и наглядности. В этом случае там показывается 4vw, но значение указано в пикселях, чтобы видеть его реальный размер.
2 — Блок не всегда может быть связан с шириной экрана, например на 1200 точках справа может быть колонка еще и наш блок будет шириной 700px, а на разрешении 900 точек наш блок может и прибавиться даже, т.к. колонка скроется или пойдет ниже.

font-size

Определяет размер шрифта элемента. Размер может быть установлен несколькими способами. Набор констант ( xx-small , x-small , small , medium , large , x-large , xx-large ) задает размер, который называется абсолютным. По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера и операционной системы.

Другой набор констант ( larger , smaller ) устанавливает относительные размеры шрифта. Поскольку размер унаследован от родительского элемента, эти относительные размеры применяются к родительскому элементу, чтобы определить размер шрифта текущего элемента.

В конечном итоге, размер шрифта сильно зависит от значения свойства font-size у родителя элемента.

Сам размер шрифта определяется как высота от базовой линии до верхней границы кегельной площадки, как показано на рис. 1.

Рис. 1. Размер шрифта

Синтаксис

font-size: абсолютный размер | относительный размер | значение | проценты | inherit

Значения

Для задания абсолютного размера используются следующие значения: xx-small , x-small , small , medium , large , x-large , xx-large . Их соответствие с размером шрифта в HTML приведено в табл. 1.

Относительный размер шрифта задается значениями larger и smaller .

Также разрешается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), пункты ( pt ), пикселы ( px ), проценты ( % ) и др. За 100% берется размер шрифта родительского элемента. Отрицательные значения не допускаются.

inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

       
Duis te feugifacilisi
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  

Результат данного примера показан на рис. 1.

Рис. 2. Применение свойства font-size

Объектная модель

[window.]document.getElementById(» elementID «).style.fontSize

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Как менять размер текста при изменении размера окна?

Для изменения размера текста веб-страницы совместно с окном браузера есть несколько методов. Рассмотрим наиболее популярные.

Использование единиц vw

Размер текста задаётся с помощью свойства font-size, в качестве значения можно указывать разные единицы — пиксели, пункты, миллиметры и др. Единица vw (от англ. viewport width — ширина области просмотра) соответствует 1% от ширины окна браузера, таким образом, при изменении этой ширины будет меняться и размер текста (пример 1).

Пример 1. Использование vw

Результат данного примера показан на рис. 1.

Рис. 1. а — текст на широком окне; б — текст на узком окне

У единицы vw есть несколько недостатков — главное, что текст уменьшается пропорционально вместе с окном и в какой-то момент становится нечитаемым. Это будет особенно заметно на смартфонах, где ширина экрана меньше ширины мониторов. Чтобы установить минимальный размер текста можно воспользоваться функцией calc(), как показано в примере 2.

Пример 2. Использование calc()

Здесь мы смешиваем разные единицы — для заголовка rem и vw, для основного текста пиксели и vw. Использование calc() гарантирует, что текст не станет меньше указанного значения (для заголовка, к примеру, это 1rem).

Использование медиа-запросов

Поскольку единицы vw завязаны на ширину области просмотра, то при увеличении размера окна увеличивается и размер текста. Иногда требуется сделать наоборот — на маленьких экранах показывать большой текст, а на больших экранах, соответственно, маленький текст. Для этого применяются медиа-запросы, они меняют стиль элементов при определённой ширине окна браузера.

Сперва определяем стиль для больших экранов, затем с помощью конструкции @media screen and (max-width: 1024px) задаём стиль для экранов с шириной до 1024 пикселей. Внутри @media пишется размер текста под этот размер. При желании ниже добавляем ещё несколько @media с разными значениями max-width (пример 3).

Пример 3. Использование @media

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

См. также

• @media
• calc()
• clamp()
• font-size
• Единицы размера в CSS
• Медиа-запросы
• Отзывчивый веб-дизайн
• Размер текста
• Свойства шрифта в CSS

Размер шрифта в зависимости от разрешения экрана

Доброго времени суток! Нужна помощь. Нужно сделать чтобы на сайте менялся размер шрифта в зависимости от разрешения экрана. Если разрешение большое то шрифт больше, если маленькое то и шрифт соответственно тоже маленький. Подскажите как такое реализовать. Заранее благодарен!

• AdSense автоматически оптимизирует объявление под мобильное устройство
• Директ завершает процесс перехода на крупные изображения
• Фиксированные объявления AdSense начнут показываться на широких экранах

На сайте с 04.02.2008
23 октября 2012, 09:56
На сайте с 08.03.2008
23 октября 2012, 10:04

Digidie:
Доброго времени суток! Нужна помощь. Нужно сделать чтобы на сайте менялся размер шрифта в зависимости от разрешения экрана. Если разрешение большое то шрифт больше, если маленькое то и шрифт соответственно тоже маленький. Подскажите как такое реализовать. Заранее благодарен!

Указывать размер шрифта в % или large, x-large и т.д.

fura.pro, gruzovik.pro, rezume.pro, rezina.pro, prognoz.pro, referat.pro, voditel.pro, zdanie.pro (mailto:vadim@svitonline.com?subject=.pro)

На сайте с 09.10.2011
23 октября 2012, 10:07

Почему то все так пишут))) У меня сейчас есть скрипт который высчитывает ширину в зависимости от высоты, 4/3 короче. Нужно чтобы размер шрифта менялся в зависимости от разрешения. Попробовал тем способом который вы предлагаете. Что то как то муторно это все, или может я не так делал, оно в принципе и работает, но не цепляет IE, нужно хотя бы чтобы и 8 версия поддерживала. Да и потом на Mac’e разрешение вообще 2500px. Как быть со всем этим. В общем нужно от мобильных устройств до монитора диагональю 27». Такое можно реализовать?

Размер шрифта стоит итак в процентах. Но что то никакой разницы я невижу. Если при маленьком разрешении шрифт нормальный то при большом вообще мизерный. Тут больше даже не на уменьшение разрешения а на увеличение, чем больше разрешение, тем больше шрифт)))

На сайте с 08.03.2008
23 октября 2012, 10:24

Привязывайтесь к размеру шрифта, т.е. указывайте в em.

На сайте с 09.10.2011
23 октября 2012, 10:45

Это не помогает, пробовал выставить для боди 0,7em шрифт тот какой нужен) Потом через медиа попробовал выставить при больших разрешениях другую величину, но почему то не сработало.

На сайте с 08.03.2008
23 октября 2012, 11:44

Digidie:
Это не помогает, пробовал выставить для боди 0,7em шрифт тот какой нужен) Потом через медиа попробовал выставить при больших разрешениях другую величину, но почему то не сработало.

Если не помогает значит чет не так сделали.

На сайте с 04.02.2005
23 октября 2012, 15:26

% и em это здесь, скорей всего не уместны

Хочется человеку, чтобы размер шрифта менялся пропорционально размеру экрана

300×300 size 15px

600×600 size 30px

а em как был em так и останется em

в данной ситуации тоже не помощник.

CSS не обладает возможностью вычислений.