HTML\CSS → Оформление текста — новые возможности

Подключение пользовательских веб-шрифтов производится с помощью CSS-правила @font-face. Можно хранить шрифты и подключать их со своего сервера или использовать

@font-face {
    font-family: "Roboto";
    src:
        local("Roboto Regular"),
        url("/assets/roboto.woff") format("woff");
}

Тени для текста создаются с помощью CSS-свойства text-shadow.


Свойства тени:

  • форма тени повторяет текст;
  • нельзя управлять растяжением текстовой тени;
  • можно создавать множественные тени, первая тень в списке — самая верхняя.
text-shadow: 5px 5px 10px #000000;
text-shadow:
    10px 10px 5px #111111,
    20px 20px 5px #222222;

Свойство word-wrap позволяет изменить правила переноса слов. Значения:
normal — слова переносятся на новую строку по обычным правилам (по пробелам);
break-word — перенос производится браузером в тех местах, где слова перестают помещаться в контейнер.

word-wrap: break-word;

Свойство white-space управляет пробелами и переносом строк. Оно принимает значения:
normal — режим по умолчанию;
nowrap — отображает весь текст одной строкой без переносов;
pre — сохраняет пробелы и переносы как в исходном коде аналогично тэгу pre;
pre-wrap — работает как значение pre, но добавляет автоматические переносы, если текст не помещается в контейнер.

<h2>Заголовок с множеством   пробелов   и переносом!</h2>
h2 { white-space: pre-wrap; }

Свойство letter-spacing задает межсимвольное расстояние.

letter-spacing: -5px;

Свойство word-spacing задает расстояние между отдельными словами и строчными элементами.

Свойство word-spacing можно использовать для задания отступов между блочно-строчными элементами, а также изображений.

p, ul { word-spacing: 5px; }

Свойство text-indent устанавливает отступ для первой строки.

text-indent: 10px;

Псевдоэлементы ::first-letter и ::first-line позволяют стилизовать первую букву и первую строку абзаца, соответственно.

p:first-child::first-letter { color: red; } /* буквица с помощью CSS */
p::first-line { font-weight: bold; }

Cвойством direction можно указать направление текста, это обычно используется для корректного отображения арабского языка и иврита. Принимает значения: ltr (направление слева направо) и rtl (направление справа налево). Свойство влияет на порядок колонок в табличках.

Свойство unicode-bidi управляет поведением барузера при обнаружении текста с установленным direction, может принимать значение:
normal — браузер самостоятельно определяет, как ему следует отображать текст на основе используемых символов Unicode;
embed — переопределяет направление текста, располагая его согласно свойству direction (применяется, когда в блоке текст на двух разнонаправленных языках);
bidi-override — переопределяет порядок символов в тексте согласно значению direction.

direction: rtl;
unicode-bidi: bidi-override;

Свойство text-overflow позволяет определить, как будет выглядеть текст, который не поместится в контейнер. Значения:
clip — текст обрезается по размеру контейнера (по умолчанию);
ellipsis — текст обрезается и к концу строки добавляется многоточие.

Свойство применимо только к однострочным текстам, а также к блокам, значение свойства overflow которых установлено в auto, scroll или hidden.

p { 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

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

Свойство column-width задает ширину колонки, минимальную желаемую. Если свойство не указано, браузер автоматически поделит текст на такое количество колонок, чтобы они уместились во всю доступную ширину. Значение свойства положительное и задается в px, em, pt и т.д.
Свойство column-gap задает ширина промежутка между колонками (по умолчанию равна 1em).

column-count: 3;
column-width: 50px;
column-gap: 2em;