Свойства CSS

Меню

font

Поддержка браузерами

12.0+ 4.0+ 1.0+ 1.0+ 3.5+ 1.0+

Описание

CSS свойство font является универсальным, оно позволяет одновременно задать сразу несколько параметров шрифта. Для этого используются специальные ключевые слова: caption, icon, menu, message-box, small-caption, status-bar или значения следующих свойств:

Как и в любом универсальном свойстве, значения, которые не были установлены принимают значения по умолчанию. Но для свойства font есть несколько правил использования, если эти условия не выполняются, свойство является недопустимым и полностью игнорируется:

  • значения свойств font-size и font-family являются обязательными к указанию
  • размер высоты строки (line-height) должен указываться сразу после размера шрифта, через косую черту (слэш) - "/"
  • если будут устанавливаться значения свойств font-style, font-variant и font-weight, то они должны быть определены перед font-size
  • font-family определяется последним, после всех остальных свойств (значение inherit недопустимо к применению)
Значение по умолчанию: не определено
Применяется: ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-line
Анимируется: да, смотрите каждое свойство, входящее в состав краткого метода, отдельно
Наследуется: да
Версия: CSS1
Синтаксис JavaScript: object.style.font="italic small-caps bold 12px arial,sans-serif"

Синтаксис

font: font-style font-variant font-weight font-size/line-height|caption|icon|menu|message-box
	 |small-caption|status-bar|inherit;

Значения свойства

Значение Описание
font-style Задает стиль шрифта. Смотрите возможные значения у свойства font-style.
font-variant Указывает разновидность шрифта. Смотрите возможные значения у свойства font-variant.
font-weight Задает жирность шрифта. Смотрите возможные значения у свойства font-weight.
font-size/line-height Задает размер шрифта и высоту строки. Смотрите возможные значения у свойств font-size и line-height.
font-family Определяет семейство шрифта. Смотрите возможные значения у свойства font-family.
caption Шрифт используется для текста элементов управления (кнопок, раскрывающихся списков и т.п.).
icon Шрифт используется для текста под иконками.
menu Шрифт используется в раскрывающимися меню.
message-box Шрифт используется для диалоговых окон.
small-caption Тоже самое, что и caption, только используется уменьшенный шрифт (для небольших элементов).
status-bar Шрифт используется для строки состояния окна.
inherit Указывает, что значение наследуется от родительского элемента.

Пример


<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Пример</title>
  <style>
    p.ex1 { font: 15px arial,sans-serif; }
    p.ex2 { font: italic bold 12px/1 Georgia,serif; }
  </style>
</head>

<body>

  <p class="ex1">Пример демонстрирует, как можно изменить текст
  на странице с помощью свойства font. </p>
  
  <p class="ex2">С помощью свойства font можно отредактировать текст,
  например поменяв толщину шрифта, его размер и высоту строки.</p>
  
</body>
</html>

Результат данного примера в окне браузера:

font