Свойство font-weight, насыщенность шрифта
Ещё один параметр шрифта, которым мы можем управлять — это насыщенность или толщина шрифта. Шрифт может быть жирнее или тоньше обычного начертания. Устанавливается насыщенность с помощью свойства font-weight . В качестве значения можно использовать ключевое слово или число. Самые часто встречающиеся значения:
- 400 или normal — обычный шрифт, значение по умолчанию;
- 700 или bold — жирный шрифт.
h1 < font-weight: 400; /* то же самое что и normal */ >p < font-weight: bold; /* то же самое что и 700 */ >На самом деле, font-weight может принимать одно из девяти числовых вариантов насыщенности:
- 100: Thin;
- 200: Extra Light (Ultra Light);
- 300: Light;
- 400: Normal;
- 500: Medium;
- 600: Semi Bold (Demi Bold);
- 700: Bold;
- 800: Extra Bold (Ultra Bold);
- 900: Black (Heavy).
Все эти числовые значения задают степень толщины шрифта от самого тонкого до самого толстого.
Но в большинстве системных шрифтов всё равно есть только два варианта толщины: обычный normal (400) и жирный bold (700). Поэтому и остальные значения свойства используются реже.
Кроме перечисленных выше числовых значений у font-weight может быть ещё два относительных значения: bolder и lighter . Эти значения делают шрифт жирнее и тоньше, чем текущее или унаследованное значение.
Перейти к заданию
- index.html Сплит-режим
- style.css Сплит-режим
CSS свойство font-weight
Устанавливает насыщенность или «жирность» начертания шрифта.
CSS синтаксис
font-weight: normal | bold | bolder | lighter | число | initial | inherit;
Возможные значения
| Значение | Описание |
|---|---|
| normal | Значение по умолчанию. Обычное начертание. |
| bold | Жирное начертание. |
| bolder | Более жирное начертание, чем у родительского элемента. |
| lighter | Менее жирное начертание, чем у родительского элемента. |
| 100 200 300 400 500 600 700 800 900 |
Устанавливает определенную насыщенность шрифта — от полужирного до жирного начертания. 400 — то же, что normal, 700 — то же, что bold. |
| inherit | Значение наследуется от родительского элемента. |
| initial | Устанавливает значение по умолчанию. |
Пример использования
Устанавливаем насыщенность шрифта для трех разных параграфов
p.normal < font-weight: normal; >p.thick < font-weight: bold; >p.thicker
font-weight
CSS свойство font-weight устанавливает начертание шрифта. Некоторые шрифты доступны только в нормальном или полужирном начертании.
Интерактивный пример
Синтаксис
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;
Значения
Нормальное начертание. То же, что и 400 .
Полужирное начертание. То же, что и 700 .
Изменяет начертание относительно насыщенности родительского элемента (сверхтонкое начертание).
Изменяет начертание относительно насыщенности родителя элемента (сверхжирное начертание).
100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , 900
Цифровые значения насыщенности шрифтов, которые позволяют задавать больше, чем нормальное и полужирное начертание.
Недоступность заданного значения
Если заданное цифровое значение насыщенности недоступно, для определения толщины отображаемого шрифта используется следующий алгоритм:
- Если задано значение выше 500 , будет использовано первое доступное более жирное начертание (если такого не окажется, то первое доступное более светлое).
- Если задано значение менее 400 , будет использовано первое доступное более светлое начертание (если такого не окажется, то первое доступное более жирное).
- Если задано значение 400 , будет применено 500 . Если 500 недоступно, то будет использован алгоритм для подбора значений менее 400 .
- Если задано значение 500 , будет применено 400 . Если 400 недоступно, то будет использован алгоритм для подбора значений менее 400 .
Это означает, что для шрифтов, которые предоставляют только 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 | Тонкий (Волосяной) Thin (Hairline) |
| 200 | Дополнительный светлый (Сверхсветлый) Extra Light (Ultra Light) |
| 300 | Светлый Light |
| 400 | Нормальный Normal |
| 500 | Средний Medium |
| 600 | Полужирный Semi Bold (Demi Bold) |
| 700 | Жирный Bold |
| 800 | Дополнительный жирный (Сверхжирный) Extra Bold (Ultra Bold) |
| 900 | Чёрный (Густой) Black (Heavy) |
Интерполяция
Значения font-weight интерполируются с помощью дискретных шагов (кратные 100). Интерполяция происходит в действительном пространстве чисел и превращается в целое число путём округления до ближайшего числа, кратного 100, со значениями посредине между кратными 100 округлёнными в сторону положительной бесконечности.
Формальный синтаксис
font-weight =
| (en-US)
bolder | (en-US)
lighter
=
normal | (en-US)
bold | (en-US)
Примеры
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 heavybr /> span>I'm lighterspan> div>
CSS
/* Назначение тексту элементажирного начертания. */ p font-weight: bold; > /* Назначение тексту элемента жирности, которая больше на два уровня, чем normal, но все ещё меньше, чем стандартный bold. */ div font-weight: 600; > /* Назначение тексту элемента жирности, которая на один уровень меньше, чем у его родителя. */ span font-weight: lighter; >
Result
Спецификации
| Specification |
|---|
| CSS Fonts Module Level 4 # font-weight-prop |
| Начальное значение | normal |
|---|---|
| Применяется к | all elements and text. Это также применяется к ::first-letter и ::first-line . |
| Наследуется | да |
| Обработка значения | ключевое слово или числовое значение, с bolder и lighter , трансформируемися в действительное значение |
| Animation type | жирность шрифта |
Совместимость браузеров
BCD tables only load in the browser
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 7 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
font-weight
Свойство font-weight определяет насыщенность (толщину) символов в тексте.
| Значение по умолчанию: | normal |
|---|---|
| Наследуется: | да |
| Версия: | CSS1 |
Аргументы
| Значение | Описание |
|---|---|
| normal | Нормальный шрифт. Значение по умолчанию |
| bold | Толстый шрифт |
| bolder | Шрифт должен быть толще (более насыщеннее) по отношению к элементу родителю |
| lighter | Шрифт должен быть тоньше (менее насыщеннее) по отношению к элементу родителю |
| 100 200 300 400 500 600 700 800 900 | Позволяет задать произвольную толщину. 400 — нормальный шрифт, 700 — толстый. |
| inherit | Значение должно быть унаследовано от элемента родителя |