font-weight

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Описание

CSS свойство font-weight устанавливает насышенность начертания шрифта. Некоторые шрифты доступны только в нормальном или полужирном начертании.

Начальное значениеnormal
Применяется квсе элементы. Это также применяется к ::first-letter и ::first-line.
Наследуетсяда
Отображениевизуальный
Обработка значенияключевое слово или числовое значение, с bolder и lighter, трансформируемися в действительное значение
Animation typeжирность шрифта
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Синтаксис

font-weight: normal;
font-weight: bold;

/* Relative to the parent */
font-weight: lighter;
font-weight: bolder;

font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

/* Global values */
font-weight: inherit;
font-weight: initial;
font-weight: unset;

Значения

normal
Нормальное начертание. То же, что и 400.
bold
Полужирное начертание. То же, что и 700.
lighter
Изменяет начертание относительно насыщенности родительского элемента (сверхсветлое начертание).
bolder
Изменяет начертание относительно насыщенности родителя элемента (сверхжирное начертание).
100, 200, 300, 400, 500, 600, 700, 800, 900
Цифровые значения насыщенности шрифтов, которые позволяют задавать больше, чем нормальное и полужирное начертание.

Отступление

If the exact weight given is unavailable, then the following heuristic is used to determine the weight actually rendered:

  • If a weight greater than 500 is given, the closest available darker weight is used (or, if there is none, the closest available lighter weight).
  • If a weight less than 400 is given, the closest available lighter weight is used (or, if there is none, the closest available darker weight).
  • If a weight of exactly 400 is given, then 500 is used. If 500 is not available, then the heuristic for font weights less than 500 is used.
  • If a weight of exactly 500 is given, then 400 is used. If 400 is not available, then the heuristic for font weights less than 400 is used.

Это означает, что для шрифтов, которые предоставляют только normal и bold начертания, 100-500 normal, и 600-900 bold.

Значение относительных весов

Когда используется жирнее или светлее, следующая таблица используется для вычисления абсолютного веса элемента:

наследуемое значение жирнее светлее
100 400 100
200 400 100
300 400 100
400 700 100
500 700 100
600 900 400
700 900 400
800 900 700
900 900 700

Определение веса имени

Значения от 100 до 900, примерно, соответствуют следующим распространенным именам насыщенности:

100
Тонкий (Волосяной)
200
Дополнительный светлый (Сверхсветлый)
300
Светлый
400
Нормальный
500
Средний
600
Полужирный (Demi Bold)
700
Жирный
800
Дополнительный жирный (Сверхжирный)
900
Черный (Густой)

Интерполяция

Значения font-weight интерполируются  с помощью дискретных шагов (кратные 100). Интерполяция происходит в действительном пространстве чисел и превращается в целое число путем округления до ближайшего числа, кратного 100, со значениями посредине между кратными 100 округленными в сторону положительной бесконечности.

Формальный синтаксис

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Примеры

HTML

<p>
  Alice was beginning to get very tired of sitting by her sister on the
  bank, and of having nothing to do: once or twice she had peeped into the
  book her sister was reading, but it had no pictures or conversations in
  it, 'and what is the use of a book,' thought Alice 'without pictures or
  conversations?'
</p>

<div>I'm heavy<br/>
  <span>I'm lighter</span>
</div>

CSS

/* Set paragraph text to be bold. */
p {
  font-weight: bold;
}

/* Set div text to two steps darker than
   normal but less than a standard bold. */
div {
 font-weight: 600;
}

/* Sets text enclosed within span tag 
   to be one step lighter than the parent. */
span {
  font-weight: lighter;
}

Result

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

Specification Status Comment
CSS Fonts Module Level 3
Определение 'font-weight' в этой спецификации.
Кандидат в рекомендации No change
CSS Transitions
Определение 'font-weight' в этой спецификации.
Рабочий черновик Defines font-weight as animatable.
CSS Level 2 (Revision 1)
Определение 'font-weight' в этой спецификации.
Рекомендация No change
CSS Level 1
Определение 'font-weight' в этой спецификации.
Рекомендация Initial definition

Совместимость браузеров

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Базовая поддержка 2.0 1.0 (1.7 или ранее) 3.0 3.5 1.3
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Базовая поддержка 1.0 1.0 (1.0) 6.0 6.0 3.1

Метки документа и участники

 Внесли вклад в эту страницу: dfitiskin, SphinxKnight, s1lver
 Обновлялась последний раз: dfitiskin,