Свойство font

Все эти свойства очень замысловаты, а применение их в совокупности может сделать объявления несколько громоздкими:

h1 {font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 30px;
font-weight: 900; font-style: italic; font-variant: small-caps;}
h2 {font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 24px;
font-weight: bold; font-style: italic; font-variant: normal;}

Эту проблему можно частично решить посредством группировки селекторов, но не проще ли объединить все в одно свойство? Введем свойство font, представляющее собой короткую форму записи всех остальных свойств шрифта (плюс еще кое-что). Вообще говоря, в объявлении font могут задаваться любые значения каждого из перечисленных свойств шрифта или значение «системный шрифт» (описанное в разделе «Применение системных шрифтов»). Таким образом, предыдущий пример можно было бы сократить следующим образом:

h1 {font: italic 900 small-caps 30px Verdana, Helvetica, Arial, sans-serif;}
h2 {font: bold normal italic 24px Verdana, Helvetica, Arial, sans-serif;}

Я говорю, что запись стилей «можно было бы» сократить таким образом, потому что существуют еще некоторые другие возможности, обусловленные относительной свободой записи свойства font.


Внимательно рассмотрев предыдущий пример, можно увидеть, что порядок задания первых трех значений различен. В правиле для h1 первые три значения – font-style, font-weight и font-variant – размещены в указанной последовательности, тогда как во втором правиле они упорядочены так: font-weight, font-variant и font-style. Здесь нет ошибки, потому что эти три свойства могут быть записаны в произвольном порядке. Более того, если значение любого из них равно normal, оно может быть совсем опущено. Поэтому следующие правила эквивалентны предыдущему примеру:

h1 {font: italic 900 small-caps 30px Verdana, Helvetica, Arial, sans-serif;}
h2 {font: bold italic 24px Verdana, Helvetica, Arial, sans-serif;}

В этом примере значение normal в правиле для h2 было пропущено, но результат совершенно аналогичен предыдущему примеру. Однако важно понимать, что такая свобода касается только первых трех значений свойства font. Поведение двух последних подчиняется намного более строгим правилам. Значения font-size и font-family не только должны быть расположены в установленном порядке, но и обязаны всегда присутствовать в объявлении font. И точка, никаких вариантов. Если какое-либо из них будет пропущено, все правило будет признано недействительным, и, скорее всего, агент пользователя его проигнорирует.


Таким образом, следующие правила обеспечат результат:

h1 {font: normal normal italic 30px sans-serif;} /* здесь нет проблем */
h2 {font: 1.5em sans-serif;} /* также все в порядке; опущены значения 'normal' */
h3 {font: sans-serif;} /* НЕВЕРНО--отсутствует 'font-size' */
h4 {font: lighter 14px;} /* НЕВЕРНО--отсутствует 'font-family' */

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Абсолютные размеры
Варианты шрифтов
Загрузка шрифтов
Задание семейства шрифтов
Интеллектуальное сопоставление шрифтов

Вернуться в раздел: CSS / 5. Шрифт