font

Содержание

Универсальное свойство, которое позволяет одновременно задать несколько характеристик шрифта и текста.

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

Значение по умолчаниюЗависит от использования
НаследуетсяДа
ПрименяетсяКо всем элементам

Значения

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

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

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.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>font</title>
  <style>
   .layer1 {
    font: 12pt sans-serif;  
   } 
   h1 {
    font: 2em serif;
   }
  </style>
 </head>
 <body> 
  <div class="layer1">
   <h1>Экзистенциальный либерализм</h1>
   <p>Карл Маркс исходил из того, что типология 
   средств массовой коммуникации неизбежна.</p>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

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

Рис. 1. Применение свойства font

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

Объект.style.font

Спецификация

СпецификацияСтатус
CSS Fonts Module Level 3Возможная рекомендация
CSS Level 2 (Revision 1)Рекомендация
CSS Level 1Рекомендация

Браузеры

Internet ExplorerChromeOperaSafariFirefox
41611
AndroidFirefox MobileOpera MobileSafari Mobile
1161




Рекомендую хостинг: beget.ru

Сервер падал:54 дн. 3:10 назад.

Посещений в месяц:205640

Посещений в день:100


+7 (951) 527 0204

+7 (928) 103 4987

programmer@niesoft.ru