CSS/Шрифты и текст

Шрифт и текст в CSS имеют следующие свойства.

Шрифты

font-family

Семейство шрифта

В этом свойстве через запятую перечисляются шрифты в порядке приоритета. Браузер будет использовать первый из списка. Если первый не будет найден, будет использоваться следующий и так далее. Если ни один не будет найден, тогда браузер применит шрифт по умолчанию. Если в имени шрифта есть пробелы, его необходимо заключать в одинарные или двойные кавычки.

После всех шрифтов необходимо добавить семейство шрифтов, из которого будет выбран подходящий шрифт, если требуемых шрифтов не окажется на компьютере.

Пример:

p {
  font-family: Verdana, Helvetica, Arial, sans-serif;
}

Существуют 5 семейств шрифтов:

serif — шрифты с засечками
sans-serif — шрифты без засечек
monospace — моноширинные
cursive — курсивные
fantasy — декоративные

Пример, как выглядят такие шрифты:

serif sans-serif monospace cursive fantasy

font-style

Стиль шрифта

Существуют три значения этого свойства:

normal — обычный (значение по умолчанию)

italic — курсив

oblique — наклонный

Браузеры последний стиль обычно отображают как курсивный

font-variant

Вариант шрифта

normal — обычный (значение по умолчанию)
small-caps — капитель, то есть все строчные символы становятся уменьшенными заглавными

font-weight

Вес шрифта

Это свойство устанавливает вес (насыщенность) шрифта.

Возможные значения:

100
200
300
400 или normal
500
600
700 или bold
800
900

font-size

Размер шрифта

Возможные значения этого свойства:

абсолютные константы: xx-small, x-small, small, medium (значение по умолчанию), large, x-large, xx-large
относительные константы: smaller, larger
абсолютные и относительные единицы измерения CSS

line-height

Межстрочный интервал, часто применяется вместе с font-size

Возможные значения:

normal — нормальное значение (по умолчанию)
number — число (больше либо равно 0), на которое умножается текущий размер шрифта
length — фиксированное значение в единицах измерения CSS
% — проценты от текущего размера шрифта

font

Это сокращённая форма записи свойств шрифта. Необходимо лишь указать font-size и font-family. Остальные свойства шрифта указываются при желании

Пример:

p {
  font: bold italic small-caps 150%/1.4 Arial, Helvetica, sans-serif;
}

Также можно указывать ключевые слова: caption, icon, menu, message-box, small-caption, status-bar

web-шрифты

Свойство, которое позволяет отображать на экране компьютера любой шрифт. Впервые появилось в CSS2. Используется правило @font-face

Шрифты бывают следующих типов:

eot — embedded opentype (.eot)
ttf — truetype (.ttf)
otf — opentype (.ttf, .otf)
svg — svg-шрифты (.svg, .svgz)
woff — web open font format (.woff)

Текст

text-align

Выравнивание текста

Возможные значения:

left — по левому краю (значение по умолчанию)
right — по правому краю
center — по центру
justify — по ширине

letter-spacing/word-spacing

Интервал между буквами/словами

normal — нормальное значение (по умолчанию)
length — значение в единицах измерения CSS (допускаются отрицательные значения)

text-decoration

Оформление текста

Возможные значения:

underline — подчёркнутый текст
overline — линия над текстом
line-through — перечёркнутый текст
blink — мигающий текст
none — отмена всех эффектов (значение по умолчанию)

text-indent

Отступ первой строки

length — фиксированное значение в единицах измерения CSS (значение по умолчанию равно 0)
% — проценты от ширины строки

text-transform

Трансформация текста

Возможные значения:

none — нет трансформации (значение по умолчанию)
uppercase — преобразование всех строчных символов в заглавные
lowercase — преобразование всех заглавных символов в строчные
capitalize — преобразование первой буквы каждого слова в заглавную

vertical-align

Выравнивание элемента по вертикали

Применяется только к строчным элементам и к ячейкам таблицы

Возможные значения для строчных элементов:

baseline — по базовой линии (значение по умолчанию)
sub — нижний индекс
super — верхний индекс
top — верх элемента выравнивается с самым высоким элементом строки
text-top — верх элемента выравнивается с верхом шрифта родительского элемента
middle — по середине
bottom — по нижней части
text-bottom — низ элемента выравнивается с низом шрифта родительского элемента
проценты
величины CSS

Для ячеек таблицы:

baseline — содержимое ячейки по базовой линии (значение по умолчанию)
top — по верхнему краю
bottom — по нижнему краю
middle — по середине ячейки таблицы

Для строчных элементов это свойство выравнивает сам элемент, а не его содержимое. Для ячеек таблицы — наоборот

white-space

Пробелы между словами

Возможные значения:

normal — обычное поведение (значение по умолчанию)
pre — пробелы и переносы учитываются
nowrap — пробелы и переносы не учитываются
pre-wrap — пробелы учитываются, текст переносится
pre-line — пробелы не учитываются, текст переносится

text-shadow

Добавление тени к тексту (CSS3)

Возможные значения:

h-shadow — смещение тени по горизонтали
v-shadow — смещение тени по вертикали
blur — радиус размытия тени
color — цвет тени
none — нет тени (значение по умолчанию)

text-overflow

Видимость текста, если он не влезает в ширину блока (CSS3)

Возможные значения:

clip — текст обрезается по размеру блока (значение по умолчанию)
ellipsis — текст обрезается с добавлением многоточия