CSS свойство font

CSS свойства

Определение и применение

CSS свойство font устанавливает все свойства шрифта в одном объявлении.

Свойства, которые можно установить (в указанном порядке!):

Значения font-size (размер шрифта) и font-family (шрифт элемента) являются обязательными. Если один из других значений отсутствуют, то будут установлены значения по умолчанию.

Поддержка браузерами

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
font1.01.03.51.04.012.0

CSS синтаксис:

font:"font-style font-variant font-weight font-size / line-height font-family | caption | icon | menu | message-box | small-caption | status-bar | initial | inherit";

JavaScript синтаксис:

object.style.font = "italic small-caps bold 12px/30px courier"

Значения свойства

ЗначениеОписание
font-styleЗадает стиль шрифта для элемента. Значение по умолчанию normal.
font-variantУказывает, должен ли текст быть выведен в капители (оставить без модификаций строчные буквы или установить строчные знаки как уменьшенные заглавные). Значение по умолчанию normal.
font-weightУстанавливает насколько жирным будет выглядеть текст в элементе. Значение по умолчанию normal.
font-size/line-heightЗадает размер шрифта элемента / задает расстояние между строками. Значение по умолчанию medium / normal.
font-family Задает шрифт для элемента. Значение по умолчанию зависит от браузера.
captionУстанавливает шрифт, который используется для заголовков элементов управления (например - кнопки).
iconУстанавливает шрифт, который используется для текста в иконках (значках).
menuУстанавливает шрифт, который используется в раскрывающихся меню.
message-boxУстанавливает шрифт, который используется в диалоговых окнах.
small-captionБолее мелкая версия шрифта, который устанавливается с помощью значения caption.
status-barУстанавливает шрифт, который используется в статус баре.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Да.

Анимируемое

Да.

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

<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства font-weight.</title>
<style> 
.test {
font : italic small-caps bold 12px/30px courier;;
background-color : orange;
}
.test2 {font : caption;}
.test3 {font : icon;}
.test4 {font : menu;}
.test5 {font : message-box;}
.test6 {font : small-caption;}
.test7 {font : status-bar;}
</style>
</head>
	<body>
		<p class = "test">font: italic small-caps bold 12px/30px courier;background-color:orange;</p>
		<p class = "test2">font: caption;</p>
		<p class = "test3">font: icon;</p>
		<p class = "test4">font: menu;</p>
		<p class = "test5">font: message-box;</p>
		<p class = "test6">font: small-caption;</p>
		<p class = "test7">font: status-bar;</p>
	</body>
</html>
Пример использования универсального свойства CSS font.
Пример использования универсального свойства CSS font.
CSS свойства