- font — weight
- Примеры
- Как понять
- Как пишется
- Подсказки
- Ещё примеры
- На практике
- Денис Русаков советует
- Алёна Батицкая советует
- CSS font-weight Property
- Browser Support
- CSS Syntax
- Property Values
- Related Pages
- COLOR PICKER
- Report Error
- Thank You For Helping Us!
- font-weight
- Интерактивный пример
- Синтаксис
- Значения
- Недоступность заданного значения
- Значение относительных весов
- Определение веса имени
- Интерполяция
- Формальный синтаксис
- Примеры
- HTML
- CSS
- Result
- Спецификации
- Совместимость браузеров
- Found a content problem with this page?
- MDN
- Support
- Our communities
- Developers
font — weight
Свойство font — weight задаёт насыщенность шрифта: от самого тонкого до самого жирного начертания.
Примеры
Скопировать ссылку «Примеры» Скопировано
div font-weight: normal; font-weight: bold;>
div font-weight: normal; font-weight: bold; >
Значения относительно родительского элемента:
div font-weight: lighter; font-weight: bolder;>
div font-weight: lighter; font-weight: bolder; >
div 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;>
div 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; >
Как понять
Скопировать ссылку «Как понять» Скопировано
Большинство шрифтов имеют два варианта начертания: обычное normal и жирное bold . Их в основном и используют.
Но браузер может отобразить и более тонкие или толстые варианты, если шрифт их поддерживает. Такие варианты задаются с помощью слов lighter и bolder или в условных единицах от сверхсветлого начертания 100 до сверхжирного или «чёрного» 900 с шагом 100 единиц.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Толщину текста можно задать с помощью ключевых слов или числовым значением:
- normal — стандартная толщина шрифта. Соответствует значению 400. Значение по умолчанию.
- bold — жирный набор текста. Соответствует 700.
- lighter — более тонкий вариант, чем в родительском элементе. Например, светлое начертание Light.
- bolder — более насыщенный вариант, чем в родительском элементе. Например, сверхжирное начертание Extra Bold.
- 100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , 900 — условные единицы насыщенности, где 400 — это стандартная насыщенность текста. Используются редко, так как большинство шрифтов имеют только обычное и жирное написание.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
💡 Если всё же решишь использовать цифры, но у выбранного шрифта нет такого варианта насыщенности, то для значений от 100 до 500 браузер выберет стандартный вариант normal , а от 600 до 900 — жирный шрифт bold .
Ещё примеры
Скопировать ссылку «Ещё примеры» Скопировано
Попробуем задать насыщенность сразу разными способами к разным элементам кода:
Шрифт этого заголовка — жирный. Мы задали его с помощью ключевого слова bold.
В цифровом значении он равен 700 единицам.Это текст стандартной толщины внутри контейнера
.
Он эквивалентен 400 единицам толщины. Это текст внутри контейнера — и он чуть толще, чем стандартный normal, но тоньше, чем bold. Мы задали его насыщенность с помощью значения 500. В контейнере шрифт тоньше, чем в , внутри которого он находится. Его мы задали с помощью значения lighter.body> h1>Шрифт этого заголовка — жирный. Мы задали его с помощью ключевого слова bold. В цифровом значении он равен 700 единицам.h1> p> Это текст стандартной толщины внутри контейнера p>. Он эквивалентен 400 единицам толщины.p> div> Это текст внутри контейнера div> — и он чуть толще, чем стандартный normal, но тоньше, чем bold. Мы задали его насыщенность с помощью значения 500.br> span>В контейнере span> шрифт тоньше, чем в div>, внутри которого он находится. Его мы задали с помощью значения lighter.span> div> body>
body font-family: "Roboto", sans-serif;> /* Зададим толщину заголовка с помощью слова bold. */h1 font-weight: bold;> /* Обычный текст в абзаце
сделаем стандартным normal */
p font-weight: normal;> /* В контейнере текст будет средним по жирности между normal и bold */div font-weight: 500;> /* В элементе текст будет на один уровень меньше по жирности,чем у родительского элемента, внутри которого он находится */span font-weight: lighter;>body font-family: "Roboto", sans-serif; > /* Зададим толщину заголовка с помощью слова bold. */ h1 font-weight: bold; > /* Обычный текст в абзаце
сделаем стандартным normal */
p font-weight: normal; > /* В контейнере текст будет средним по жирности между normal и bold */ div font-weight: 500; > /* В элементе текст будет на один уровень меньше по жирности, чем у родительского элемента, внутри которого он находится */ span font-weight: lighter; >
На практике
Скопировать ссылку «На практике» Скопировано
Денис Русаков советует
Скопировать ссылку «Денис Русаков советует» Скопировано
🛠 У каждого значения насыщенности есть своё название, принятое в типографике.
Распространённые названия насыщенности
- 100 — тонкое начертание (thin, hairline);
- 200 — сверхсветлое (extra light, ultra light);
- 300 — светлое (light);
- 400 — нормальное (normal, regular, book);
- 500 — среднее (medium);
- 600 — полужирное (semi bold, demi bold);
- 700 — жирное (bold);
- 800 — сверхжирное (extra bold, ultra bold);
- 900 — тяжёлое (black, heavy).
В большинстве графических редакторов насыщенность шрифта для блока с текстом указана в цифрах, поэтому удобнее использовать в коде цифровое значение.
Чтобы использовать все 9 начертаний (100–900), шрифт должен их поддерживать. В противном случае браузер будет подбирать ближайшее подходящее начертание из тех, что есть в подключаемом шрифте и поэтому надёжнее использовать то значение font — weight , которое вы указали в директиве font — face .
Например, у всеми известного шрифта Roboto, нет насыщенности шрифта равной 800, поэтому при выборе данного значения браузер будет показывать 900, как ближайшее корректное значение.
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
🛠 Большинство современных шрифтов имеет полный набор начертаний. Для более тонкого управления отображением шрифта используются как раз таки цифровые значения для свойства font — weight .
🛠 Относительные значения bolder и lighter не используются почти никогда. Причина в том, что они относительные. Как итог если меняется вес шрифта родительского элемента — меняется вес шрифта ребёнка. Но это, чаще всего, не то что нужно. Совет: используй всегда абсолютный вес шрифта.
CSS font-weight Property
The font-weight property sets how thick or thin characters in text should be displayed.
Default value: | normal |
---|---|
Inherited: | yes |
Animatable: | yes. Read about animatable Try it |
Version: | CSS1 |
JavaScript syntax: | object.style.fontWeight=»bold» Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
CSS Syntax
Property Values
Value | Description | Demo |
---|---|---|
normal | Defines normal characters. This is default | Demo ❯ |
bold | Defines thick characters | Demo ❯ |
bolder | Defines thicker characters | Demo ❯ |
lighter | Defines lighter characters | Demo ❯ |
100 200 300 400 500 600 700 800 900 | Defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Related Pages
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
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
Спецификации
Начальное значение | normal |
---|---|
Применяется к | все элементы. Это также применяется к ::first-letter и ::first-line . |
Наследуется | да |
Обработка значения | ключевое слово или числовое значение, с bolder и lighter , трансформируемися в действительное значение |
Animation type | жирность шрифта |
Совместимость браузеров
BCD tables only load in the browser
Found a content problem with this page?
This page was last modified on 10 окт. 2022 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
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.