Как динамически подгонять шрифт css

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

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

Использование единиц 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
• font-size
• Единицы размера в CSS
• Медиа-запросы
• Отзывчивый веб-дизайн
• Размер текста
• Свойства шрифта в CSS
• Функция calc()
• Функция clamp()
• Функция max()
• Функция min()

Как увеличить шрифт в css

Размером шрифта можно управлять с помощью свойства font-size .

/* Размер основного шрифта страницы*/ body  font-size: 1.3rem; > /* Размер шрифта заголовка первого уровня*/ h1  font-size: 2rem; > 

Здесь для определения размера используется единица rem. Если значение rem для не задано, то оно принимается за 1rem, и все остальные размеры задаются относительно него. Таким образом, например, 1.2rem увеличит размер шрифта на 20%.

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

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

Blabla

— на экране десктопа он выглядит вполне достойно при размере в 36px, но на телефоне он уже с трудом входит в экран (условно). Если же поставить размер в зависимость от % или от ширины vw, то из-за линейной зависимости на телефоне будет практически ничего не видно.
Гугл подсказывает, что можно в @media ставить конкретные значения (не плохой вариант) или использовать JS чтобы подгонять размер по месту.
То же касается отступов сверху, снизу.
Как вы считаете это можно сделать наиболее красиво?
Спасибо!

• Вопрос задан более трёх лет назад
• 43475 просмотров

Комментировать
Решения вопроса 1
Павел Радьков @paulradzkov
Дизайнер, верстальщик, начальник отдела UI

Можно поставить размер шрифта в зависимости от размеров экрана, но через calc() задавать минимальное значение.

В этом примере ( codepen.io/paulradzkov/pen/jqYqgY ) размер шрифта заголовка никогда не будет меньше 16px (1em):

Можно использовать более сложные формулы совместно с @media . Тут размер шрифта плавно меняется от 14 до 18px в диапазоне от 480 до 1024px.

@media (min-width: 480px) and (max-width: 1024px) < p < font-size: calc(14px + (18 - 14) * ( (100vw - 480px) / ( 1024 - 480) )); >>

До 480 и после 1024px размер задан жестко с использованием @media .

Но в целом это все сложно и редко нужно. Я обычно задаю размер фиксированно на двух-трёх диапазонах при помощи @media .

UPD: можно даже заставить текст максимально заполнять площадь вьюпорта codepen.io/CrocoDillon/pen/fBJxu

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

Если установить textLength равным длине path вдоль которого расположено слово или фраза из нескольких слов, то текст займет всю длину path, при любом размере шрифта.

В примере ниже длина path арки равна 1175px устанавливаем textLength=»1175″ и текст полностью займет всю арку при любом размере шрифта

font-size:52px;

.container < width:50vw; height:50vh; >#txt

В следующем примере уменьшим вдвое длину textLength=»1175 / 2 = 587.5″

Фраза займет ровно половину длины арки

.container < width:50vw; height:50vh; >#txt

Удваиваем количество слов, чтобы уместиться на этой же длине textLength=»1175″ каждый символ сжимается.

.container < width:50vw; height:50vh; >#txt

Тот же пример с длинной, удвоенной фразой, но размер шрифта увеличим с 52 до 72px. Фраза будет занимать тоже место по длине, но символы ещё больше сожмутся и вырастут по высоте.

.container < width:50vw; height:50vh; >#txt

Вывод

Размер глифов шрифта под определенную длину с целью её полного заполнения, вычисляется самим препроцессором SVG.

Это может быть реализовано двумя способами:

1. При большой длине textLength и lengthAdjust=»spacingAndGlyphs» и малом количестве символов они будут сильно растянуты, чтобы заполнить всю длину

.container < width:50vw; height:50vh; >#txt

1. При большой длине textLength и lengthAdjust=»spacing» (значение по умолчанию) и малом количестве символов расстояние между символами будет значительно увеличено

.container < width:50vw; height:50vh; >#txt

Отслеживать
ответ дан 9 сен 2021 в 19:12
Alexandr_TT Alexandr_TT
110k 23 23 золотых знака 113 113 серебряных знаков 377 377 бронзовых знаков

Я уже добился такого эффекта)) Сначала textPath не назначается, а замеряется его text.clientWidth и path.getTotalLength() . Затем, через тупой перебор или бинарным поиском подбираем такой размер шрифта, чтобы text.clientWidth == path.getTotalLength() . Ну или установить +- какой-то. Затем уже только добавляется для . И уже стили вроде lengthAdjust для компенсации нашего +-. Только я не помню totalLength пути имеет реальный размер или исходя из viewBox — тогда надо еще к реальному размеру привести.

10 сен 2021 в 5:30

@Leonid В таком случае Я уже добился такого эффекта)) хорошо бы оформить это ответом. Чем больше разных решений, тем лучше!