Подключение пользовательских веб-шрифтов производится с помощью 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;