font | Справочник CSS
http://belarusweb.net
Основы создания сайтов

font

Описание

Сокращенное css-свойство font (от англ. fontшрифт) используется для определения сразу нескольких параметров шрифта и текста в одном объявлении.

Характеристики

  • Значение по умолчанию: см. каждое свойство.
  • Применяется: ко всем элементам.
  • Наследуется: да.
  • Анимируется: см. каждое свойство.
  • JavaScript: object.style.font="value".

Синтаксис

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

Значения

В качестве параметров свойство принимает через пробел значения свойств font-style, font-weight, font-variant. font-size, line-height, font-family. При этом размер шрифта и его семейство должны указываться обязательно. Также имеет значение порядок указания значений свойств: первыми, если они конечно будут указываться, должны записываться значения свойств font-style, font-variant или font-weight в любом порядке, затем необходимо указывать значение свойства font-size, а также при необходимости через слэш '/' значение свойства line-height, в конце указывается значение свойства font-family. В случае отсутствия значения какого-нибудь свойства браузер использует вместо него соответствующее значение по умолчанию.

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

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

Ссылки

Примеры

HTML Результат BwCodes
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
	
		.font_1{
		font: 1.2em/25px serif;
		}
		
		.font_2{
		font: bold italic 0.9em "courier new", serif;
		}
		
		.font_3{
		font: normal small-caps 1em/1.2em verdana;
		}
		
	</style>
	
</head>
<body>

	<p class="font_1">
		font_1{font: 1.2em/25px serif;}.<br>
		Здесь указаны размер, высота строки и семейство.
	</p>
	
	<p class="font_2">
		font_2{font: bold italic 0.9em "courier new", serif;}.<br>
		Здесь &ndash; насыщенность, начертание, размер, шрифт + семейство.
	</p>
	
	<p class="font_3">
		font_3{font: normal small-caps 1em/1.2em verdana;}<br>
		Значение normal будет применено сразу к насыщенности<br>
		и начертанию, т.к. оно присутствует у обоих свойств.
	</p>
	
</body>
</html>

Пример №1