18.Свойство-сокращение font
В предыдущем уроке мы с вами разобрали много свойств для текста. Зачастую достаточно накладно отдельно прописывать каждое из этих свойств, поэтому в CSS для большего удоства существует специальное свойство-сокращение font.
Данное свойство позволяет одновременно задать размер шрифта, семейство, жирность, курсив и межстрочный интервал.
Описываемое свойство имеет следующий синтаксис:
курсив жирность размер_шрифта / межстрочный_интервал семейство
При этом порядок свойств имеет значение, и обязательными являются “размер_шрифта” и “семейство”.
Обратите внимание на то, что другие свойства, кроме описанных выше в синтаксисе, не входят в данное свойство сокращение.
Давайте посмотрим на примерах.
Пример
Пусть у нас есть следующие стили:
p {
font-size: 16px;
font-family: Arial;
}
Давайте перепишем их через свойство-сокращение:
p {
font: 16px Arial;
}
Пример
Пусть у нас есть следующие стили:
p {
font-size: 16px;
font-family: Arial;
line-height: 50px;
}
Давайте перепишем их через свойство-сокращение:
p {
font: 16px/50px Arial;
}
Пример
Пусть у нас есть следующие стили:
p {
font-size: 16px;
font-family: Arial;
font-weight: bold;
}
Давайте перепишем их через свойство-сокращение:
p {
font: bold 16px Arial;
}
Пример
Пусть у нас есть следующие стили:
p {
font-size: 16px;
font-family: Arial;
font-weight: bold;
line-height: 50px;
font-style: italic;
}
Давайте перепишем их через свойство-сокращение:
p {
font: bold italic 16px/50px Arial;
}
Практические задачи
Задача 1
Сократите код, используя свойство-сокращение font:
p {
font-family: "Times New Roman";
font-size: 13px;
line-height: 20px;
}