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

В этом уроке мы займёмся текстом на странице: его шрифтом, размером, жирностью, межстрочным интервалом и выравниванием.

Из курса HTML вы знаете элементы strong и em. Они придают тексту смысл: strong отмечает важный текст, а em — текст, который мы выделяем интонацией. По умолчанию браузеры показывают их жирным шрифтом и курсивом, но внешний вид текста — дело CSS. С помощью CSS можно сделать жирным или курсивным любой текст или изменить вид strong и em.

Шрифт мы выбираем свойством font-family. Семейство шрифтов — это одна гарнитура со всеми её начертаниями: например, у семейства Arial есть обычное, жирное, курсивное и жирное курсивное начертания. Браузер может использовать только те шрифты, которые установлены на устройстве посетителя (или загружены вместе со страницей — об этом в конце урока). Поэтому значение font-family — это список шрифтов через запятую: браузер берёт первый шрифт из списка, который у него есть.

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

Здесь браузер сначала пробует Verdana. Если Verdana на устройстве нет, он пробует Arial. А если нет и Arial, то использует свой шрифт без засечек по умолчанию.

sans-serif — это не название шрифта, а название универсального семейства: целого вида шрифтов. У браузера есть шрифт для каждого универсального семейства, поэтому список мы всегда заканчиваем одним из них. Самые важные универсальные семейства:

• serif: у букв есть маленькие штрихи (засечки) на концах, как в книгах,
• sans-serif: буквы без засечек, простые и чистые,
• monospace: все буквы одной ширины, как в коде.

Если в названии шрифта есть пробелы, его лучше писать в кавычках: "Times New Roman". А универсальное семейство в кавычки брать нельзя: "sans-serif" в кавычках означает шрифт с названием sans-serif, а такого шрифта не существует.

Шрифт наследуется, поэтому мы задаём его для body, и весь текст на странице его получает. А потом можно задать другой шрифт некоторым элементам, например заголовкам.