Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.
Описание
CSS свойство font-weight
устанавливает насышенность начертания шрифта. Некоторые шрифты доступны только в нормальном или полужирном начертании
.
Начальное значение | normal |
---|---|
Применяется к | все элементы. Это также применяется к ::first-letter и ::first-line . |
Наследуется | да |
Отображение | визуальный |
Обработка значения | ключевое слово или числовое значение, с bolder и lighter , трансформируемися в действительное значение |
Анимируемость | да, как жирность шрифта |
Канонический порядок | уникальный не однозначный порядок, определённый формальной грамматикой |
Синтаксис
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, then500
is used. If500
is not available, then the heuristic for font weights less than 500 is used. - If a weight of exactly
500
is given, then400
is used. If400
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 |