font

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

Краткая информация

Значение по умолчанию	Зависит от использования
Наследуется	Да
Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/fonts.html#propdef-font

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Универсальное свойство, которое позволяет одновременно задать несколько характеристик шрифта и текста. Свойство применимо ко всем элементам. Создано в версии CSS1, но проходит валидацию согласно версии CSS3.

Синтаксис

font: [font-style||font-variant||font-weight] font-size [/line-height] font-family | inherit

Значения

В качестве обязательных значений свойства font указывается размер шрифта и его семейство. Остальные значения являются опциональными и задаются при желании. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно.

inherit: Наследует значение родителя.

Допускается в качестве значения использовать ключевые слова, определяющие шрифт различных элементов операционной системы пользователя.

caption: Шрифт для текста элементов форм вроде кнопок.
icon: Шрифт для текста под иконками.
menu: Шрифт применяемый в меню.
message-box: Шрифт для диалоговых окон.
small-caption: Шрифт для подписей к небольшим элементам управления.
status-bar: Шрифт для строки состояния окон.

Примеры использования:

p { font: 12pt/10pt sans-serif; }

Из типографики пошла запись указывать через слэш размер шрифта и межстрочное расстояние (интерлиньяж). Поэтому 12pt в данном случае означает размер основного текста в пунктах, а 10pt — интерлиньяж. В качестве семейства указывается рубленый шрифт (sans-serif).

p { font: bold italic 110% serif; }

Значение bold устанавливает жирное начертание текста, а italic — курсивное. В данном случае их порядок не важен, поэтому bold и italic можно поменять местами. Размер текста задается в процентах, а в качестве гарнитуры используется шрифт с засечками (serif).

p { font: normal small-caps 12px/14px fantasy; }

Значение small-caps принадлежит свойству font-variant и устанавливает текст в виде капители (заглавные буквы уменьшенного размера). Значение normal применяется сразу к двум свойствам: font-style и font-weight.

Для наглядности разместим две таблицы:

Дополнительные свойства font

Свойство	Описание
font-style	Устанавливает стиль шрифту
font-variant	Устанавливает вариант шрифта
font-weight	Устанавливает вес шрифта
font-size	Устанавливает размер шрифта
line-height	Устанавливает высоту линии
font-family	Устанавливает семейство шрифтов

Дополнительные значения font

Значение	Описание
caption	Используются шрифты для элементов управления
icon	Используются шрифты для иконок,этикеток
menu	Используются шрифты для меню
message-box	Используются шрифты для диалоговых окон
small-caption	Уменьшенная версия шрифта для заголовков
status-bar	Используются шрифты для строки состояния
inherit	Наследует значения от родителя

Пример применения свойства

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство font</title>
<style type="text/css">
<!--
p {
font-style:italic;
font-variant:normal;
font-weight:bold;
font-size:16px;
line-height:5px;
font-family:arial;
}
-->
</style>
</head>
<body>
<center>
<p>В таблице стилей к данному документу перечислены все основные параметры для шрифта</p>
</center>
<br>
</body>
</html>

Пример в действии

Объектная модель

[window.]document.getElementById("elementID").style.font

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Источники: http://htmlbook.ru/ и http://delaisait.ucoz.ru/

Поделись ссылкой на эту страницу с друзьями:

Категория: Шрифт | Добавил: free20860soft (02.07.2013)

Просмотров: 837 | Рейтинг: 0.0/0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]