Текст и шрифт

Обновлено: 30.05.2022

  • @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-align

    text-align

    Определяет горизонтальное выравнивание текста в пределах элемента.

  • text-align-last

    text-align-last

    Задаёт выравнивание последней строки блока текста.

  • 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.