Сокращённое свойство CSS font
Чтобы сделать код короче, можно задать все свойства шрифта одним объявлением.
Свойство font — это сокращение для: font-style, font-variant, font-weight, font-stretch, font-size, line-height и font-family.
Правила для сокращённого свойства CSS font
- Значения
font-sizeиfont-familyобязательны. Если отсутствует любое другое значение, используется значение по умолчанию. - Если заданы,
font-style,font-variantиfont-weightдолжны стоять передfont-size. - Если задано,
line-heightдолжно стоять сразу послеfont-size, разделённое косой чертой, например15px/30px. font-familyдолжно быть последним значением.
Пример
Три абзаца задают сразу несколько свойств шрифта с помощью сокращения font.
Prompt
HTML-страница, использующая сокращённое свойство font.
Во внутреннем блоке
<style> создайте три класса абзацев: a с "20px Arial, sans-serif"; b с "italic bold 16px Arial, sans-serif"; и c с "italic small-caps bold 15px/30px Georgia, serif". Добавьте по одному абзацу каждого класса.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.a {
font: 20px Arial, sans-serif;
}
p.b {
font: italic bold 16px Arial, sans-serif;
}
p.c {
font: italic small-caps bold 15px/30px Georgia, serif;
}
</style>
</head>
<body>
<p class="a">A paragraph using font: 20px Arial.</p>
<p class="b">A paragraph using font: italic bold 16px Arial.</p>
<p class="c">A paragraph using font: italic small-caps bold 15px/30px Georgia.</p>
</body>
</html>
Все CSS-свойства шрифта
Сводка свойств шрифта:
font— задаёт все свойства шрифта одним объявлением.font-family— задаёт семейство шрифтов.font-size— задаёт размер шрифта.font-style— задаёт стиль шрифта.font-variant— задаёт, использует ли текст капитель (small-caps).font-weight— задаёт насыщенность шрифта.