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

Подогнать ширину текста под ширину картинки при помощи CSS

Приветствую сообщество. Задача: есть картинка неизвестной ширины. Под ней располагается текстовый блок, который должен быть такой же ширины, как и картинка. Проблема легко решается, если задать жесткий размер охватывающего DIV по ширине в пикселях. Но дело в том, что не известен размер картинки, которая будет загружена. Можно ли сделать это без применения JS или серверных манипуляций с картинкой, только средствами CSS?

Саратовская фракция серча ( ). Давайте посчитаемся.
На сайте с 08.08.2005
30 марта 2010, 07:29

Консультация по данному вопросу стоит денег! Надо бы зарядить по максимуму, но неизвестно сколько денег на WMZ кошельке ТС. Можно ли угадать сколько денег у него на кошельке без применения JS или серверных манипуляций с картинкой, только средствами угадывания? В переводе это означает — хочу то не знаю что! Ибо с тот же браузер это программа! Которая сама не думает, она берет что дают! Если ей ничего не дать (ширина текста = размер картинки) то и выровнять по нему текст (вогнать в тот же размер) она не сможет.

На сайте с 25.07.2009
30 марта 2010, 08:42
Наверное коряво вопрос формулирую. Вот css:

div.small-screenshot <
width: 200px;
display: inline-block;
vertical-align: top;
>

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

Этот html код используется на нескольких страницах. Картинка samle.png на разных страницах может быть разной ширины. Как избавиться от фиксированного указания ширины в 200px в css, и устанавливать ширину дива динамически, в зависимости от ширины текущего samle.png?

На сайте с 18.05.2004
30 марта 2010, 08:55

malls:
Если ей ничего не дать (ширина текста = размер картинки) то и выровнять по нему текст (вогнать в тот же размер) она не сможет

может=))) просто все на дивах и стилях помешались

картинка
текст

T.R.O.N добавил 30.03.2010 в 12:56
malls:
В переводе это означает — хочу то не знаю что!
на вопрос с множественной выборкой, всегда дается ответ с вариациями. =))))))

От воздержания пока никто не умер. Хотя никто и не родился! Prototype.js был написан теми, кто не знает JavaScript, для тех, кто не знает JavaScript (Richard Cornford)

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

Управляйте размером шрифта элемента с помощью утилит text- .

Быстрая коричневая лиса прыгает через ленивую собаку.

Быстрая коричневая лиса прыгает через ленивую собаку.

Быстрая коричневая лиса прыгает через ленивую собаку.

Быстрая коричневая лиса прыгает через ленивую собаку.

Быстрая коричневая лиса прыгает через ленивую собаку.

p class="text-sm . ">Быстрая коричневая лиса . p> p class="text-base . ">Быстрая коричневая лиса . p> p class="text-lg . ">Быстрая коричневая лиса . p> p class="text-xl . ">Быстрая коричневая лиса . p> p class="text-2xl . ">Быстрая коричневая лиса . p>

Установите высоту строки элемента одновременно с установкой размера шрифта, добавив модификатор высоты строки в любую утилиту изменения размера шрифта. Например, используйте text-xl/8 , чтобы установить размер шрифта 1.25rem с высотой строки 2rem .

Так я начал ходить в воду. Я не буду лгать вам, мальчики, я был в ужасе. Но я шел дальше, и когда я пробирался мимо прибоя, на меня снизошло странное спокойствие. Я не знаю, было ли это божественным вмешательством или родством всех живых существ, но скажу тебе, Джерри, что в тот момент я был морским биологом.

Так я начал ходить в воду. Я не буду лгать вам, мальчики, я был в ужасе. Но я шел дальше, и когда я пробирался мимо прибоя, на меня снизошло странное спокойствие. Я не знаю, было ли это божественным вмешательством или родством всех живых существ, но скажу тебе, Джерри, что в тот момент я был морским биологом.

text-base/loose

Так я начал ходить в воду. Я не буду лгать вам, мальчики, я был в ужасе. Но я шел дальше, и когда я пробирался мимо прибоя, на меня снизошло странное спокойствие. Я не знаю, было ли это божественным вмешательством или родством всех живых существ, но скажу тебе, Джерри, что в тот момент я был морским биологом.

p class="text-base/6 . ">So I started to walk into the water. p> p class="text-base/7 . ">So I started to walk into the water. p> p class="text-base/loose . ">So I started to walk into the water. p>

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

p class="text-sm/[17px] . ">p>

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover : text-base , чтобы применять утилиту text-base только при hover .

p class="text-sm hover:text-base"> p> 

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md: text-base , чтобы применить утилиту text-base только на экранах среднего размера и выше.

p class="text-sm md:text-base"> p> 

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

Если установить 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 золотых знака 114 114 серебряных знаков 386 386 бронзовых знаков

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

10 сен 2021 в 5:30

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

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

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

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

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

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

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

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

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

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

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

Использование функции clamp()

Функция clamp() устанавливает рекомендованное, минимальное и максимальное значения для какого-либо свойства, в частности, font-size . Это позволяет задать диапазон, в котором будет меняться размер нашего текста. К примеру, следующая запись говорит, что текст абзаца не должен быть меньше 0.75rem, не должен быть больше 2rem, а лучше, если он будет 1rem.

Чтобы размер шрифта плавно менялся вместе с шириной окна, рекомендованное значение следует дополнить единицами vw.

Онлайновый сервис Font-size Clamp Generator позволяет получить параметры clamp() на основе минимальной и максимальной ширины области просмотра (рис. 3).

Рис. 3. Генератор параметров функции clamp()

В примере 3 функция clamp() применяется для заголовка и основного текста.

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

section h2 < font-size: clamp(2rem, 0.5rem + 4vw, 4rem); >section div

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

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

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

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

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

См. также

• @media
• font-size
• Единицы размера в CSS
• Размер текста
• Свойства шрифта в CSS
• Функция calc()
• Функция clamp()
• Функция max()
• Функция min()