Как уменьшить ширину текста html

font-stretch

CSS свойство font-stretch позволяет регулировать ширину текста.

Работает только для свойства font-family, которое имеет значение для ширины текста.

Значение по умолчанию:	none
Применяется:	ко всем элементам
Анимируется:	да
Наследуется:	да
Версия:	CSS3
Синтаксис JavaScript:	object.style.fontStretch=»expanded»

Синтаксис

font-stretch: ultra-condensed|extra-condensed|condensed|semi-condensed|normal|semi-expanded |expanded|extra-expanded|ultra-expanded|inherit;

Значения свойства

Значение	Описание
wider	Увеличивает ширину текста.
narrower	Уменьшает ширину текста.
ultra-condensed	Уменьшает ширину текста на максимально возможное значение.
extra-condensed	Текст уже, чем condensed, но шире ultra-condensed.
condensed	Текст уже, чем semi-condensed, но шире extra-condensed.
semi-condensed	Ширина текста меньше, чем стандартная, но больше значения condensed.
normal	Указывает, что текст не будет изменять ширину.
semi-expanded	Текст шире стандартного, но уже значения expanded.
expanded	Текст шире, чем semi-expanded, но уже extra-expanded.
extra-expanded	Текст шире, чем expanded, но уже ultra-expanded.
ultra-expanded	Увеличивает ширину текста на максимально возможное значение.
inherit	Указывает, что значение наследуется от родительского элемента.

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru | razumnikum.ru

font-size

Определяет размер шрифта элемента. Размер может быть установлен несколькими способами. Набор констант ( xx-small , x-small , small , medium , large , x-large , xx-large ) задает размер, который называется абсолютным. По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера и операционной системы.

Другой набор констант ( larger , smaller ) устанавливает относительные размеры шрифта. Поскольку размер унаследован от родительского элемента, эти относительные размеры применяются к родительскому элементу, чтобы определить размер шрифта текущего элемента.

В конечном итоге, размер шрифта сильно зависит от значения свойства font-size у родителя элемента.

Сам размер шрифта определяется как высота от базовой линии до верхней границы кегельной площадки, как показано на рис. 1.

Рис. 1. Размер шрифта

Синтаксис

font-size: абсолютный размер | относительный размер | значение | проценты | inherit

Значения

Для задания абсолютного размера используются следующие значения: xx-small , x-small , small , medium , large , x-large , xx-large . Их соответствие с размером шрифта в HTML приведено в табл. 1.

Табл. 1. Размер шрифта в CSS и HTML

CSS	xx-small	x-small	small	medium	large	x-large	xx-large
HTML	1	2	3	4	5	6	7

Относительный размер шрифта задается значениями larger и smaller .

Также разрешается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), пункты ( pt ), пикселы ( px ), проценты ( % ) и др. За 100% берется размер шрифта родительского элемента. Отрицательные значения не допускаются.

inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

       
Duis te feugifacilisi
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  

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

Рис. 2. Применение свойства font-size

Объектная модель

[window.]document.getElementById(» elementID «).style.fontSize

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

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

Два примера установки размера шрифта и его позиции в блоке относительно его ширины. Один на JS, если блок не во всю ширину экрана, другой на CSS, если во всю.

Изначально мы имеем картинку, на которой расположен в нужном месте текст, который не перекрывает определенные ее части.

Все величины у этой конструкции выставлены для размера блока в 1170 пикселей.

Пример с точными размерами:

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

CSS

position : relative ;
.fontsize img < width : 100% ; .fontsize .text < width : 100% ; position : absolute ; font-family : 'Roboto' , sans-serif ; color : #337AB7 ; font-size : 48px ; left : 130px ;

HTML

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

Чтобы правильно изменять размер шрифта воспользуемся примером ниже, в котором используется небольшой JS

Пример с размерами через JS:

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

HTML и CSS у нас остаются прежние (в CSS можно удалить лишнее, это свойства font-size , top и left , которые мы задаем через JS)

JS

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 будет такими:

.fontsize .text < font-size : 4vw ; left : 12vw ;

Где размер текста и его позиция также устанавливаются на глаз на любом разрешении экрана.

Нравится 18
В закладки

• Опубликовано: 03.01.2021 / Обновлено: 03.03.2022
• Рубрики: Вкладки, блоки и списки, Тексты, ссылки и кнопки
• Метки: CSS, JavaScript
• 18398 просмотров

Смотрите также:

3D текст на CSS

3 варианта создания трехмерного текста на CSS

Стрелки на CSS

Варианты оформления разнообразных стрелок на CSS

Оформление списков ul li для информационных блоков

Красивое оформление списков для любой информации, с использованием всего одного класса.

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

Алексей: 03.01.2021 в 17:23

У меня пара вопросов
1 — почему на примере размер шрифта в 4vw показывается в пикселях
2 — зачем вообще нужен JS, когда можно всегда считать по этой ширине экрана?

Alexander: 03.01.2021 в 17:50

1 — пример не всегда у меня показывает тот код, который дается, иногда я его меняю для удобства и наглядности. В этом случае там показывается 4vw, но значение указано в пикселях, чтобы видеть его реальный размер.
2 — Блок не всегда может быть связан с шириной экрана, например на 1200 точках справа может быть колонка еще и наш блок будет шириной 700px, а на разрешении 900 точек наш блок может и прибавиться даже, т.к. колонка скроется или пойдет ниже.

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

Есть заголовок внутри адаптивного блока. Необходимо чтобы сам текст занимал свободное пространство родительского блока по ширине и соответственно увеличивался и уменьшался в размерах.

 
Заголовок
 
 

Отслеживать
задан 13 апр 2017 в 5:15
110 1 1 золотой знак 1 1 серебряный знак 7 7 бронзовых знаков
13 апр 2017 в 5:38

Извините, я плохо понимаю английский язык. Но как я понял, там речь идёт о медиа запросах. Данный вариант также не имеет место быть, т.к придётся писать слишком много лишних запросов создавая новый блок и.или «формат» блоков.

13 апр 2017 в 5:47

Возможно есть решение от яваскрипт (в нём я тоже не силён) которое позволяет высчитать ширину блока и относительно данной ширины увеличить или уменьшить шрифт?

13 апр 2017 в 5:54
13 апр 2017 в 6:54

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

Вариант на CSS.

vw — еденица измерения, равная проценту ширины документа:

Некоторый тестовый текст

Он довольно неточен, поэтому я поставил white-space: nowrap;

Вариант с масштабированием.

Блок с текстом масштабируется с помощью JS и CSS transform

function fillDiv(div, proportional) < var div=$('#test') var currentHeight = div.outerHeight(); var currentWidth = div.outerWidth()+3; var availableHeight = window.innerHeight; var availableWidth = window.innerWidth; var scale = availableWidth / currentWidth; div.css(< "left": "0px", "top": "0px", "transform": "scale3d(" + scale + ", " + scale + ", 1)", "transform-origin": "0 0" >); > fillDiv(); $( window ).resize(fillDiv)

#test

 
Некоторый тестовый текст

Стырено и адаптировано из amazon

Отслеживать
ответ дан 13 апр 2017 в 6:43
9,720 2 2 золотых знака 17 17 серебряных знаков 49 49 бронзовых знаков

1. Обернём текст инлайн-элементом (в нашем случае это ) для того, чтобы вычислять ширину текста. Добавим для этого элемента свойство white-space: nowrap — так при инкрементальном увеличении текст не перенесется на другую строку и высчитываемая ширина не изменится.
2. Проверяем что больше — ширина страницы или ширина текста. Если текст больше, то в цикле уменьшаем его до тех пор, пока он не станет меньше. Если текст меньше, то в цикле увеличиваем его. Если в каком-либо из этих циклов произошел перебор с увеличением или уменьшением, то откатываем изменения назад и выходим из цикла.
3. Навешиваем на событие resize исполнение этой функции. Чтобы она не вызывалась при каждом событии и чтобы не сильно нагружать браузер, добавим функцию debounce() — так она вызовется один раз спустя 250 мс после окончания события.

P.S. пример не слишком хорош, потому что будет слишком часто дергаться DOM и начинаться перерисовка страницы, так что рекомендую подумать над тем, чтобы его улучшить 🙂

start(); window.addEventListener('resize', debounce(start, 250)); function getCurrentFz(selector) < let style = window.getComputedStyle(selector, null).getPropertyValue('font-size'), fontSize = parseFloat(style) return fontSize; >; function debounce(func, wait, immediate) < let timeout; return function() < let context = this, args = arguments, later = function() < timeout = null; if (!immediate) func.apply(context, args); >, callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); >; >; function start() < let body = document.body, bodyWidth = body.getBoundingClientRect().width, selectorInner = document.querySelector('h1 span'), fz = getCurrentFz(selectorInner); if (bodyWidth >selectorInner.offsetWidth) < while (bodyWidth >selectorInner.offsetWidth) < fz += 1; selectorInner.style.fontSize = fz + 'px'; if (bodyWidth < selectorInner.offsetWidth) < selectorInner.style.fontSize = fz - 1 + 'px'; break; >> > else < while (bodyWidth < selectorInner.offsetWidth) < fz -= 1; selectorInner.style.fontSize = fz + 'px'; if (bodyWidth >selectorInner.offsetWidth) < selectorInner.style.fontSize = fz + 1 + 'px'; break; >> > >;

h1 < margin: 0; >h1 span

Some text in header