Свойство-сокращение font в CSS

В предыдущем уроке мы разобрали много свойств для текста. Зачастую достаточно накладно отдельно прописывать каждое из этих свойств, поэтому в CSS для большего удобства существует специальное свойство-сокращение font. Данное свойство позволяет одновременно задать размер шрифта, семейство, жирность, курсив и межстрочный интервал.

Описываемое свойство имеет следующий синтаксис:

font-style font-weight font-size / line-height font-family

При этом порядок свойств имеет значение, и обязательными являются font-size и font-family. Обратите внимание на то, что другие свойства, кроме описанных выше в синтаксисе, не входят в данное свойство сокращение.

Давайте посмотрим на примерах.

Пример

Пусть у нас есть следующие стили:

cssp {
  font-size: 16px;
  font-family: Arial;
}

Давайте перепишем их через свойство-сокращение:

cssp {
  font: 16px Arial;
}

Пример

Пусть у нас есть следующие стили:

cssp {
  font-size: 16px;
  font-family: Arial;
  line-height: 50px;
}

Давайте перепишем их через свойство-сокращение:

cssp {
  font: 16px/50px Arial;
}

Пример

Пусть у нас есть следующие стили:

cssp {
  font-size: 16px;
  font-family: Arial;
  font-weight: bold;
}

Давайте перепишем их через свойство-сокращение:

cssp {
  font: bold 16px Arial;
}

Пример

Пусть у нас есть следующие стили:

cssp {
  font-size: 16px;
  font-family: Arial;
  font-weight: bold;
  line-height: 50px;
  font-style: italic;
}

Давайте перепишем их через свойство-сокращение:

cssp {
  font: bold italic 16px/50px Arial;
}

Практические задачи

cssp {
  font-family: "Times New Roman";
  font-size: 13px;
  line-height: 20px;
}

cssp {
  width: 300px;
  font-family: Arial;
  color: red;
  font-size: 40px;
  font-weight: bold;
}

cssp {
  font-family: Arial;
  font-size: 40px;
  font-weight: bold;
  text-indent: 50px;
  font-style: italic;
  line-height: 60px;
}