Два примера установки размера шрифта и его позиции в блоке относительно его ширины. Один на JS, если блок не во всю ширину экрана, другой на CSS, если во всю.
Изначально мы имеем картинку, на которой расположен в нужном месте текст, который не перекрывает определенные ее части.
Все величины у этой конструкции выставлены для размера блока в 1170 пикселей.
Пример с точными размерами:
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.fontsize { position: relative; } .fontsize img { width: 100%; } .fontsize .text { width: 100%; position: absolute; font-family: 'Roboto', sans-serif; color: #337AB7; font-size: 48px; top: 40px; left: 130px; } |
HTML
1 2 3 4 |
<div class="fontsize"> <div class="text">Размер шрифта</div> <img src="font-size.jpg" /> </div> |
Текст отлично расположен в блоке, но если ширина экрана увеличится или уменьшится, то становится видно, что шрифт перекрывает волны или просто не умещается в заданном блоке.
Чтобы правильно изменять размер шрифта воспользуемся примером ниже, в котором используется небольшой JS
Пример с размерами через JS:
HTML и CSS у нас остаются прежние (в CSS можно удалить лишнее, это свойства font-size
, top
и left
, которые мы задаем через JS)
JS
1 2 3 4 5 6 7 8 9 10 |
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 будет такими:
1 2 3 4 5 |
.fontsize .text { font-size: 4vw; top: 4vw; left: 12vw; } |
Где размер текста и его позиция также устанавливаются на глаз на любом разрешении экрана.
Смотрите также:
Варианты оформления уголков и рамок у информационных блоков на CSS
Адаптивная сетка с одинаковыми по высоте блоками для превью новостей или статей
Блок с вращающимся цветком и поздравлением с 8 марта
У меня пара вопросов
1 - почему на примере размер шрифта в 4vw показывается в пикселях
2 - зачем вообще нужен JS, когда можно всегда считать по этой ширине экрана?
1 - пример не всегда у меня показывает тот код, который дается, иногда я его меняю для удобства и наглядности. В этом случае там показывается 4vw, но значение указано в пикселях, чтобы видеть его реальный размер.
2 - Блок не всегда может быть связан с шириной экрана, например на 1200 точках справа может быть колонка еще и наш блок будет шириной 700px, а на разрешении 900 точек наш блок может и прибавиться даже, т.к. колонка скроется или пойдет ниже.