Текст і шрифт
Обновлено: 20.01.2023
-
@font-face
@font-face
Правило @font-face позволяет определить настройки шрифтов, а также загрузить специфичный шрифт на компьютер пользователя.
-
box-decoration-break
box-decoration-break
Указывает, как оформлять фрагмент текста при его переносе на другую строку. Работает только для следующих свойств: background, border, border-image, box-shadow, clip-path, margin и padding.
-
caret-color
caret-color
Задаёт цвет текстового курсора, который отображается в текстовых полях формы (<input>, <textarea>), а также для элементов с атрибутом contenteditable. Такой курсор по аналогии с печатными машинками также называется кареткой и показывает место ввода следующего символа. Как правило, текстовый курсор выглядит как вертикальная мигающая линия.
-
direction
direction
direction предназначен для сайтов, в которых имеет значение направление текста. Например, при использовании арабского алфавита чтение происходит справа налево.
-
font
font
Универсальное свойство, которое позволяет одновременно задать несколько характеристик шрифта и текста.
-
font-family
font-family
Устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого. Список шрифтов может включать одно или несколько названий, разделённых запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в одинарные или двойные кавычки.
-
font-kerning
font-kerning
Свойство font-kerning управляет кернингом шрифта. Кернинг — это изменение интервала между определёнными сочетаниями букв для сохранения плотности букв в тексте. Это особенно важно для букв, у которых есть наклонные линии, вроде А, У, W, V. Информация о кернинге хранится в самом шрифте и если шрифт не поддерживает эту возможность, то свойство font-kerning не окажет влияние на текст.
-
font-size
font-size
Определяет размер шрифта элемента. Размер может быть установлен несколькими способами. Набор констант (xx-small, x-small, small, medium, large, x-large, xx-large) задаёт размер, который называется абсолютным. По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера и операционной системы.
-
font-stretch
font-stretch
Устанавливает узкое, нормальное или широкое начертание шрифта, что позволяет уплотнять или расширять текст.
-
font-style
font-style
Определяет начертание шрифта — обычное, курсивное или наклонное. Когда для текста установлено курсивное или наклонное начертание, браузер обращается к системе для поиска подходящего шрифта. Если заданный шрифт не найден, браузер использует специальный алгоритм для имитации нужного вида текста.
-
font-variant
font-variant
Определяет, как нужно представлять строчные буквы — оставить их без модификаций или делать их все прописными уменьшенного размера. Такой способ изменения символов называется капителью.
-
font-weight
font-weight
Устанавливает насыщенность шрифта. Значение указывается в виде чисел от 100 до 900 с шагом 100 или с помощью заданных ключевых слов.
-
hyphens
hyphens
Свойство hyphens сообщает браузеру, как расставлять переносы слов в блоке текста. Словарь переносов хранится в браузере и подключается при наличии атрибута lang с кодом языка. Так, для русского языка следует добавить lang="ru" к элементу <html> или непосредственно к абзацу текста. Правила переносов определяются браузером и могут различаться.
-
letter-spacing
letter-spacing
Определяет интервал между символами в пределах элемента. Браузеры обычно устанавливают расстояние между символами, исходя из типа и вида шрифта, его размеров и настроек операционной системы. Чтобы изменить это значение и применяется данное свойство. Допустимо использовать отрицательное значение, но в этом случае надо убедиться, что сохраняется читабельность текста.
-
line-clamp
line-clamp
Ограничивает текст заданным числом строк. Если текст превышает указанное число строк, то текст обрезается и в конце добавляется многоточие.
-
line-height
line-height
Для блочных элементов определяет минимальную высоту строки текста. Для внедряемых строчных элементов (вроде <img>) свойство line-height не оказывает никакого эффекта. Для остальных строчных элементов line-height задаёт высоту, которая используется для расчёта высоты строки блока.
-
tab-size
tab-size
Используется для изменения ширины отступа, заданного с помощью символа табуляции (клавиша Tab).
-
text-decoration
text-decoration
Добавляет оформление текста в виде его подчёркивания, перечёркивания или линии над текстом. Одновременно можно применить более одного стиля, перечисляя значения через пробел.
-
text-decoration-color
text-decoration-color
Встановлює колір лінії, яка додається через властивість text-decoration.
-
text-decoration-line
text-decoration-line
Определяет, как должна добавляться декоративная линия к тексту — подчёркивание, перечёркивание, над текстом. Одновременно можно добавлять несколько линий, перечисляя значения через пробел.
-
text-decoration-skip-ink
text-decoration-skip-ink
Задаёт, как выводить линию под или над текстом, когда линия пересекает выносные элементы букв, вроде «у», «р», «ц» и др. Линия может быть сплошной или прерываться, чтобы пропустить «хвостики» букв (рис. 1).
-
text-decoration-style
text-decoration-style
Устанавливает стиль декоративной линии, которая добавляется к тексту через свойство text-decoration или text-decoration-line.
-
text-emphasis
text-emphasis
Сокращённое свойство, позволяющее установить значения свойств text-emphasis-style и text-emphasis-color одновременно.
-
text-emphasis-color
text-emphasis-color
Устанавливает цвет маркеров, отображаемых с помощью свойства text-emphasis-style.
-
text-emphasis-position
text-emphasis-position
Устанавливает положение маркеров, отображаемых с помощью свойства text-emphasis-style.
-
text-emphasis-style
text-emphasis-style
Устанавливает вид маркеров над каждым символом текста. Такие маркеры обычно используются в азиатских языках чтобы показать, как произносится слово. Для русского языка аналогом является знак ударения, который ставится над гласной буквой.
-
text-indent
text-indent
Устанавливает величину отступа первой строки блока текста (например, для абзаца <p>). Воздействия на все остальные строки не оказывает. Допускается отрицательное значение для создания выступа первой строки, но следует проверить, чтобы текст не выходил за пределы окна браузера.
-
text-orientation
text-orientation
Свойство text-orientation устанавливает ориентацию текстовых символов в строке и применяется только к вертикальному тексту (когда свойство writing-mode задано как vertical-lr или vertical-rl).
-
text-overflow
text-overflow
Определяет параметры видимости текста в блоке, если текст целиком не помещается в заданную область. Возможны два варианта: текст обрезается; текст обрезается и к концу строки добавляется многоточие. text-overflow работает в том случае, если для блока значение свойства overflow установлено как auto, scroll или hidden.
-
text-shadow
text-shadow
Добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия. Свойство text-shadow может работать совместно с псевдоэлементами :first-letter и :first-line.
-
text-transform
text-transform
Управляет преобразованием текста элемента в заглавные или прописные символы. Когда значение отлично от none, регистр исходного текста будет изменён.
-
unicode-bidi
unicode-bidi
В европейских языках чтение текста происходит слева направо, в то время как есть языки, где текст читается справа налево. При смешении в одном документе разных по написанию символов (русского с ивритом, к примеру) в системе юникод, их направление определяется браузером из характеристик и содержимого текста. Свойства unicode-bidi и direction задают, как должен располагаться текст используемого языка.
-
white-space
white-space
Свойство white-space устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один. Исключением является элемент <pre>, помещённый в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем. Таким образом, white-space имитирует работу <pre>, но в отличие от него не меняет шрифт на моноширинный.
-
word-break
word-break
Свойство word-break указывает, как делать перенос строк внутри слов, которые не помещаются по ширине в заданную область.
-
word-spacing
word-spacing
Устанавливает интервал между словами. Если для текста задано выравнивание через text-align со значением justify (выравнивание по ширине), то интервал между словами будет установлен принудительно, но не меньше значения, указанного через word-spacing.
-
word-wrap
word-wrap
Свойство word-wrap указывает, переносить или нет длинные слова, которые не помещаются по ширине в заданную область.
-
writing-mode
writing-mode
Устанавливает направление текста на странице — по горизонтали или вертикали.
-
Псевдоэлемент ::first-letter
Псевдоэлемент ::first-letter
Псевдоэлемент ::first-letter определяет стиль первого символа в тексте элемента, к которому добавляется. К этому псевдоэлементу могут применяться только стилевые свойства, связанные со свойствами шрифта, полями, отступами, границами, цветом и фоном.
-
Псевдоэлемент ::first-line
Псевдоэлемент ::first-line
Псевдоэлемент ::first-line задаёт стиль первой строки форматированного текста. Длина этой строки зависит от многих факторов, таких как используемый шрифт, размер окна браузера, ширина блока, языка и т. д. В правилах стиля допустимо использовать только свойства, относящиеся к шрифту, изменению цвета текста и фона.
-
Псевдоэлемент ::selection
Псевдоэлемент ::selection
Псевдоэлемент ::selection применяет стиль к выделенному пользователем тексту. В правилах стилей допускается использовать следующие свойства: color, background, background-color, cursor, outline и text-shadow.