font-weight
The font-weight property specifies the weight or boldness of the font (their degree of blackness or stroke thickness). Note that some fonts are not available in all weights; some are available only on normal and bold.
Overview table
Syntax
- font-weight: 100, 200, 300, 400, 500, 600, 700, 800, 900
- font-weight: bold
- font-weight: bolder
- font-weight: lighter
- font-weight: normal
Values
Examples
A selection of examples showing some typical uses of the font-weight property. In practise, you most probably won’t see much difference when using any values except for normal and bold .
Usage
600-900 use the closest available darker weight (or, if there is none, the closest available lighter weight).
100-500 use the closest available lighter weight (or, if there is none, the closest available darker weight).
This means that for fonts that provide only normal and bold, 100-500 are normal, and 600-900 are bold.
Although the practice — also called “Faux bold” — is not well-loved by typographers, bold faces are often synthesized by user agents for faces that lack actual bold faces.
100 to 900
These values form an ordered sequence, where each number indicates a weight that is at least as dark as its predecessor. These roughly correspond to the commonly used weight names below:
font-weight¶
Свойство font-weight устанавливает насыщенность шрифта.
Значение указывается в виде чисел от 100 до 900 с шагом 100 или с помощью заданных ключевых слов.
Синтаксис¶
Значения¶
Насыщенность шрифта задаётся с помощью ключевых слов: bold — жирное начертание и normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900 . Значения bolder и lighter изменяют жирность относительно насыщенности родителя, соответственно, в большую и меньшую сторону.
Вот как числовые значения влияют на насыщенность шрифта.
- 100 — тонкое начертание;
- 200 — сверхсветлое;
- 300 — светлое;
- 400 — нормальное (аналогично normal );
- 500 — среднее;
- 600 — полужирное;
- 700 — жирное (аналогично bold );
- 800 — сверхжирное;
- 900 — тяжёлое.
Учтите, что не все шрифты поддерживают этот набор. Если указанное значение не поддерживается, то браузер приведёт шрифт к ближайшей насыщенности. К примеру, если вы указали 900 и оно не может быть показано, то браузер в действительности применит значение 700 как ближайшее, которое работает корректно.
Font weight html что это
The font-weight property of the CSS is used to set the weight or thickness of the font being used with the HTML Text. The font-weight applied will depend on font-family used and the browser. For instance, some font-family is available only in specific weights.
Syntax:
Property Values:
- normal: This is the default font-weight & defines the normal font-weight. It is equal to the number value 400.
- bold: This defines the bold font-weight, it is equal to the number value 700.
- lighter: This makes the font-weight one level lighter than the parent element, considering the available font weights of the font family.
- bolder: This makes the font-weight one level heavier than the parent element, considering the available font weights of the font family.
- number: This sets the font-weight according to the number specified. The number can range between 1 to 1000. If the exact weight is unavailable, a suitable weight is applied.
Global Values:
- initial: This sets the font-weight to the initial(default) value.
- inherit: This sets the font-weight equal to the value inherited from its parent element.
- unset: This sets the font-weight equal to the value inherited from its parent element since font-weight is an inheritable property.
When lighter or bolder is specified, the below chart shows how the absolute font-weight of the element is determined.
CSS: font-weight property
This CSS tutorial explains how to use the CSS property called font-weight with syntax and examples.
Description
The CSS font-weight property defines the weight or boldness of the font.
Syntax
The syntax for the font-weight CSS property is:
Parameters or Arguments
The weight or boldness of a font. It can be one of the following:
| Value | Description |
|---|---|
| normal | Normal font-weight (Normal = 400 font-weight) p |
| bold | Bold font-weight (Bold = 700 font-weight) p |
| bolder | One font-weight darker than its parent element p |
| lighter | One font-weight lighter than its parent element p |
| 100, 200, 300, 400, 500, 600, 700, 800, 900 | Numeric values for font-weight ranging from 100-900, where 100 is the lightest, 900 is the boldest. 400 = normal, and 700 = bold. p |
| inherit | Element will inherit the font-weight from its parent element p |
- Some fonts may only support normal and bold weights.
- When a numeric font-weight between 600-900 is provided and the exact numeric weight is not available, then the closest available darker font-weight will be used.
- When a numeric font-weight between 100-500 is provided and the exact numeric weight is not available, then the closest available lighter font-weight will be used.
Browser Compatibility
The CSS font-weight property has basic support with the following browsers:
- Chrome
- Android
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer (IE)
- IE Phone
- Opera
- Opera Mobile
- Safari (WebKit)
- Safari Mobile
Example
We will discuss the font-weight property below, exploring examples of how to use this property in CSS.
Using Bold
Let’s look at a CSS font-weight example where we set the text to bold.
In this CSS font-weight example, we have set the font weight of the text within the <span> tag to bold.
Using Normal
Next, let’s look at a CSS font-weight example where we set the text to normal.
In this CSS font-weight example, we have set the font weight of the text within the <p> tag to normal weight.
Using Numeric Value
Let’s look at a CSS font-weight example where we set a text to a numeric font-weight.
In this CSS font-weight example, we have set the font weight of the text within the <p> tag to 500 which would use a darker font if one was available.