Пример
Указывает все свойства шрифта в одной декларации:<html>
<head>
<meta charset="utf-8" />
<style>
p.ex1 { font:15px arial,sans-serif; }
p.ex2 { font:italic bold 12px/30px Georgia,serif; }
</style>
</head>
<body>
<p class="ex1">Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. </p>
<p class="ex2">Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. Это параграф. </p>
</body>
</html>
Определение и использование
Сокращенная форма записи шрифта устанавливает все свойства шрифта в одной декларации.
Свойства, которые могут быть установленны (в следующем порядке):
Значения font-size и font-family обязательны. Если одно из значений отсутствует, значения по умолчанию будут вставлены, если таковые имеются.
Примечание: Свойство line-height устанавливает расстояние между линиями.
| Значение по умолчанию: | не указано |
|---|---|
| Унаследованный: | да |
| Версия: | CSS1 |
| Синтакс JavaScript: | object.style.font="italic small-caps bold 12px arial,sans-serif" |
Поддержка браузеров
Свойство font поддерживается во всех ведущих браузерах.
Примечание: Ни одна из версий Internet Explorer (включая IE8) не поддерживает значение "inherit".
Значения свойства
| Значение | Описание |
|---|---|
| font-style | Определяет стиль шрифта. Смотрите font-style для возможных значений |
| font-variant | Определяет вариант шрифта. Смотрите font-variant для возможных значений |
| font-weight | Определяет вес шрифта. Смотрите font-weight для возможных значений |
| font-size/line-height | Определяет размер шрифта и высоту линии. Смотрите font-size and line-height для возможных значений |
| font-family | Определяет семейство шрифта. Смотрите font-family для возможных значений |
| caption | Использование шрифтов, которые используются в таких элементах управления (как кнопки, выпадающие списки и т.д.) |
| icon | Использование шрифтов, которые используются значком этикетки |
| menu | Использование шрифтов, которые используются в выпадающем меню |
| message-box | Использование шрифтов, которые используются в диалоговых окнах |
| small-caption | Уменьшенная версия шрифта заголовка |
| status-bar | Использование шрифтов, которые используются в строке состояния |
| inherit | Указывает, что значение свойства шрифта должно быть унаследовано от родительского элемента |
Еще примеры
Пример
Этот пример демонстрирует некоторые другие значения свойств шрифта.<html> <head> <meta charset="utf-8" /> </head> <body> <p style="font:caption">Шрифт браузера, используемый в элементах управления.</p> <p style="font:icon">Шрифт браузера, используемый в значке этикетки.</p> <p style="font:menu">Шрифт браузера, используемый в нисподающем меню.</p> <p style="font:message-box">Шрифт браузера, используемый в диалоговом окне.</p> <p style="font:small-caption">Уменьшенная версия шрифта заголовка.</p> <p style="font:status-bar">Шрифт браузера, используемый в строке состояния.</p> <p><b>Примечание:</b> Фонт зависит от браузера.</p> </body> </html>
Была ли эта информация полезной?
