font-weight

Содержание

Устанавливает насыщенность шрифта. Значение указывается в виде чисел от 100 до 900 с шагом 100 или с помощью заданных ключевых слов.

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

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

Синтаксис

font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900

Значения

Насыщенность шрифта задаётся с помощью ключевых слов: bold — жирное начертание и normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900. Значения bolder и lighter изменяют жирность относительно насыщенности родителя, соответственно, в большую и меньшую сторону.

Вот как числовые значения влияют на насыщенность шрифта.

  • 100 — тонкое начертание;
  • 200 — сверхсветлое;
  • 300 — светлое;
  • 400 — нормальное (аналогично normal);
  • 500 — среднее;
  • 600 — полужирное;
  • 700 — жирное (аналогично bold);
  • 800 — сверхжирное;
  • 900 — тяжёлое.

Учтите, что не все шрифты поддерживают этот набор. Если указанное значение не поддерживается, то браузер приведёт шрифт к ближайшей насыщенности. К примеру, если вы указали 900 и оно не может быть показано, то браузер в действительности применит значение 700 как ближайшее, которое работает корректно.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>font-weight</title>
  <style>
   h1 {
    font-weight: normal; /* Нормальное начертание */
   } 
   .select {
    color: maroon; /* Цвет текста */
    font-weight: 600; /* Полужирное начертание */
   }
  </style>
 </head>
 <body>
  <h1>Мелодический голос персонажа</h1>
  <p><span class="select">Поток сознания</span>, соприкоснувшись
   в чем-то со своим главным антагонистом в постструктурной поэтике, 
   иллюстрирует былинный мифопоэтический хронотоп, об этом 
   свидетельствуют краткость и завершенность формы, 
   бессюжетность, своеобразие тематического развертывания.</p>
 </body>
</html>

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

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

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

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

Объект.style.fontWeight

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

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

Браузеры

Internet ExplorerChromeOperaSafariFirefox
3.523.51.31
AndroidFirefox MobileOpera MobileSafari Mobile
1163.1




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

Сервер падал:49 дн. 22:40 назад.

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

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


+7 (951) 527 0204

+7 (928) 103 4987

programmer@niesoft.ru