Как задать размер шрифта относительно ширины родительского блока?

Question

[ymfront]

Есть текстовый блок с максимальной шириной 500рх.

HTML:

<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing</div>

CSS:

.text {
    margin: 50px auto;
    padding: 20px;
    width: 100%;
    max-width: 500px;
    border: 5px solid #fff;
    font-weight: 700;
    font-size: 24рх;
    line-height: 1.5;
    color: #fff;
    text-align: center;
}

Можно ли как-то задать размер шрифта относительно ширины родительского блока, чтобы при уменьшении ширины блока менее 500рх шрифт также уменьшался пропорционально ширине?

Comments

[Ankhena]

Пересчитать в vw.
Для ограничений использовать функции min, max или clamp

[Сергей delphinpro]

Ankhena, Это частный случай. В общем случае поможет только javascript, с которым можно рассчитать размер шрифта от размера контейнера.
Либо вручную самому, либо использовать какой-то плагин, наподобие этого https://github.com/fxos-components/font-fit

[imko]

Сергей delphinpro, Ankhena, а cqw всякие?

[Ankhena]

imko, по-моему, там сафари грустит. Только в новых работает, а это маловато.

[imko]

Ankhena, ой сафари этот по жизни грустный) ну canisue аж 87% уже показывает, жду с нетерпением каких нибудь 95. И has еще)

[imko]

Ankhena, я так заметил по ответам тут принято указывать в том числе и решения которые точно не заработают на довольно большом числе платформ ( ͡° ͜ʖ ͡°)

[Ankhena]

imko, в принципе, почему бы и нет. Ведь вопросы живут долго и легко гуглятся.
Заработают и вполне могут пригодиться.

Answer 1

[Антон Горецкий]

Вы можете найти ответ на ваш вопрос здесь, с подробным описанием и расчетами

Answer 2

[Максим Предыбайло]

Можно просто использовать что-то типа этого

font-size: max( 24px,  5vw );
font-size: calc( 24px + 2.4vmax );