Свойство 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 недопустимо к применению)
| Значение по умолчанию: |
не определено |
| Наследуется: |
да |
| Версия: |
CSS1 |
| Синтаксис JavaScript: |
object.style.font="italic small-caps bold 12px arial,sans-serif" |
| Значение |
Описание |
| 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 |
Указывает, что значение наследуется от родительского элемента. |
Пример
html
head
style type="text/css"
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
|