Расстояние между буквами, строками, ширина табуляции в CSS

Демонстрация возможностей CSS для настройки расстояний между буквами, строками, табуляции и других свойств шрифтов.

Свойство text-indent устанавливает сдвиг первой строки, цвет первой буквы можно определить свойством :first-letter.

p {
	text-indent: 0px;
}
CSS

Свойство letter-spacing устанавливает интервал между символами. В качестве значений принимаются единицы длины (px, in, pt, em, ex), допустимо отрицательное значение. Лучшая точность получается при использовании em.

p {
	letter-spacing: 0em;
}
CSS

Word-spacing задает интервал между словами, значение можно указать в px, in, pt, em, ex.

p {
	word-spacing: 0em;
}
CSS

Свойство tab-size устанавливает ширину табуляции в <textarea>, <code>, <pre> и других элементах со свойством white-space: pre. В качестве значения используется количество символов (по умолчанию 8) или единицы длины.

Свойство пока ещё не стандартизировано W3C, но поддерживается современными браузерами.

pre {
	-o-tab-size: 8;
	-moz-tab-size: 8;
	tab-size: 8;
}
CSS

Свойство font-stretch задаёт ширину символов в шрифте, работает только со шрифтами, у которых есть поддержка разных начертаний. Значения задаются константами или процентами:

normal 100% Обычная ширина
semi-condensed 87.5% Узковатая ширина
condensed 75% Узкая ширина
extra-condensed 62.5% Очень узкая ширина
ultra-condensed 50% Самая узкая ширина
semi-expanded 112.5% Широковатая ширина
expanded 125% Средне-большая ширина
extra-expanded 150% Очень большая ширина
ultra-expanded 200% Самая большая ширина
p {
	font-stretch: 100%;
}
CSS

Второй прием увеличить ширину букв – растянуть элемент свойством transform scale от нулевой точки трансформации (transform-origin).

p {
	transform-origin: 0 0;
	transform: scale(1, 1);
}
CSS

Меняя второй параметр можно изменить высоту букв:

p {
	transform-origin: 0 0;
	transform: scale(1, 1);
}
CSS

Line-height устанавливает интерлиньяж текста, отсчет ведется от базовой линии шрифта. Значение воспринимается как множитель от текущего размера шрифта, также отступ можно указать в em или px, отрицательное значение не допускается.

p {
	line-height: 20px;
}
CSS
01.05.2020, обновлено 14.10.2020
7387

Комментарии

, чтобы добавить комментарий.

Другие публикации

Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
21991
+25
Мануал по созданию и форматированию excel файлов в PHPExcel
К сожалению разработчики прекратили поддержку и разработку проекта, но PHPExcel все равно остается популярной...
68390
+22
Таблица символов ASCII
Список из 256 символов и их коды в ASCII.
406845
+34
Печать HTML страниц
Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге...
26777
+6
Генерация счета на оплату PDF PHP
С помощью расширения dompdf можно легко сформировать PDF файл. По сути, dompdf - это конвертер HTML в PDF который...
39832
+25
Текст с градиентом
Градиент в цвет шрифта можно добавить с помощью CSS свойства background-clip: text, которое окрашивает текст в цвет или изображение указанного в background-image.
21706
+2