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>
Результат данного примера в окне браузера:
