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

Question

Есть блок, высота которого задана в процентах. Блоке есть текст...

Вопрос, как привязать размер шрифта к высоте блока, возможно? Без js, только css

Answer 1

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

html, body {
  height: 100%;
  margin: 0;
  overflow: auto;
}

section {
  container-type: size;
  height: 30%;
  margin: 2.5%;
  outline: 1px dotted red;
}

div {
  font-size: 100cqb;
  line-height: 1;
}

p {
  font-size: 50cqb;
  line-height: 1;
  margin: 0;
}

<section>
  <div>123</div>
</section>

<section>
  <p>123<br>456</p>
</section>

БЛОГ НА HUSL

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

Ответы (1 шт):