Font-weight - Property CSS
Summary of characteristics of the font-weight property
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900normalComputed value : during an animation, the font-weight property gradually changes from one value to another.Syntax diagram of font-weight.
font-weight property.The links in the diagram provide access to more details.
On the diagram, the terms in bold are the predefined words of CSS, the other terms are described below:
numberis a numerical value from1to1000, without units.
Description of the font-weight property.
font-weight Sets the weight of the characters (display in bold).
The rendering depends a lot on the font used.
Some fonts only support two possibilities: bold or normal, others offer 3 or 4 shades,
few are the ones that distinguish the 9 shades provided by font-weight.
When a weight is not available in the font used, the browser can use the weight closest to the requested weight or synthesize the weight by calculation.
For more on this, see the font-synthesis property.
The Montserrat font (Google Font) is particularly rich: it has the nine levels of weight provided by CSS.
Note: font-weight can also be a descriptor, used with the @font-face directive.
The different use of font-weight.
The word font-weight matches the property described on this page, but can also be a descriptor usable with the following guidelines:
@font-face: Defines all settings for a downloadable font.
Values for font-weight.
- font-weight: normal;
Default. Characters are displayed with the median weight.
- font-weight: bold;
Characters are displayed in bold.
- font-weight: bolder;
Relative value: characters are displayed in a higher weight than the parent.
- Parent weight = 100, 200 or 300,
boldertakes the value 400. - Parent weight = 400 or 500,
boldertake the value 700. - Parent weight = 600 or more,
boldertake the value 900.
- Parent weight = 100, 200 or 300,
- font-weight: lighter;
Relative value: Characters are displayed in less weight than the parent.
- Parent weight = from 100 to 500,
lightertake the value 100. - Parent weight = 600 or 700,
lightertake the value 400. - Parent weight = 800 or more,
lightertake the value 700.
- Parent weight = from 100 to 500,
- font-weight: 300;
The characters are displayed with a thickness that is all the greater the number. The specified value can be
100,200,300, up to1000.These nuances are not necessarily all present in the font used. When this is the case, they are commonly referred to:
100: Thin,
200: Extra Light,
300: Light,
400: normal ou Regular,
500: Medium,
600: Semi Bold,
700: bold,
800: Extra Bold,
900: Black ou heavy.
Values ​​common to all properties:
font-weight: initial (normal)
font-weight: inherit
font-weight: revert
font-weight: revertLayer
font-weight: unset
Common values ​​are presented on these pages: initial, inherit, revert, revert-layer, unset.
Animation of the font-weight property.
Here's an example of animation on the font-weight property.
The animation is more or less jerky depending on the font chosen. Indeed, some fonts only have two or three thicknesses of weight,
while others offer more.
The ideal is the so-called "variable" fonts, such as Montserrat, which allow the weight to evolve continuously.
Police 'Montserrat'
Manipulating the font-weight property programmatically.
Change the value of font-weight in Javascript.
The code below is an example that shows how to change the value of font-weight for an el element.
Two syntaxes are possible: with the name of the property written in kebab-case (a hyphen to separate words),
or with the name of the property written in camel-case (a capital letter to separate words).
let el = document.getElementById('id');
el.style['font-weight'] = 'bolder';
// or
let el = document.getElementById('id');
el.style.fontWeight = 'bolder';
Read in Javascript the value of font-weight.
The following code only works if the property has been assigned directly to the element with the HTML code style attribute,
and not by going through a CSS selector.
The value is returned as defined (predefined value or number from 100 to 900).
let el = document.getElementById('id');
let value = el.style['font-weight'];
// or
let el = document.getElementById('id');
let value = el.style.fontWeight;
Read the computed value of font-weight in Javascript.
The computed value is the value that results from the value assigned to font-weight via a selector, or the value determined via the inheritance mechanism.
Otherwise, it will be the initial value of the property (normal} in the case of font-weight). But the computed value is always equal to something.
In the case of font-weight, the value is always returned in its numeric form: a number from 100 to 1000.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('font-weight');
Change the value of font-weight with JQuery.
$('#id').css('font-weight', 'bolder');
// or
$('#id').css('fontWeight', 'bolder');
Read the computed value of font-weight with JQuery.
let value = $('#id').css('font-weight');
Code démo.
By clicking on the buttons below, you will see the value for the first button as it has been assigned, and for the second button, the
computed value. In the case of font-weight we see that the computed value is always returned as 100...1000.
Simulator.
(1) Anonymous pangram.
Browsers compatibility.
The font-weight property itself is well handled by all browsers,
But the correct reproduction of the weight (from 100 to 1000) depends on the font chosen.
font-weight property to change the weight of characters.100 to 900) in the font-weight syntax.font-weightproperty
values
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :
Internet Explorer
KaiOS Browser
Opéra Mobile
Opéra
Safari
Safari sur IOS
Firefox pour AndroĂŻd
Samsung Internet
Chrome
Edge
Firefox
AndroĂŻd Brower
Chrome pour AndroĂŻd
Baidu Browser
QQ Browser
UC Browser pour AndroĂŻd
Opéra mini
font-weight history.
The font-weight property has been around since the first CSS specification, and has changed little since then.
-
Cascading Style Sheets specification - Version 1
Initial definition of property, with values ​​still in use today.
November 17, 1995Working Draft.
November 12, 1996Proposed for recommendation.
December 17, 1996Recommendation .
September 13, 2018Old specification, declared obsolete. -
Cascading Style Sheets Level 2 - Revision 1 Specification
No change.November 04, 1997Working Draft.March 24, 1998Proposed for recommendation.May 11, 1998Recommendation . -
CSS Fonts Module Level 3
The property specification is not changed. Butfont-weightis also a descriptor for the@font-faceat-rule.July 21, 1997Working Draft.
October 03, 2013Candidate Recommendation.August 14, 2018Proposed for recommendation.September 20, 2018Recommendation . -
CSS Fonts Module Level 4
No change.July 11, 2017Working Draft. -
CSS Fonts Module Level 5
Possibility of expressing the value in percentages.June 29, 2021Working Draft.
See also, about typefaces.
font-weight and the properties concerning fonts are numerous. They are grouped in the CSS Fonts Module.
ou will find the following definitions in this module:
Properties:
em, ex, etc.Functions:
At-rules:
Descriptors :
@font-face. Sets the height of the characters above the baseline.
@font-face. Sets the height of the characters below the baseline.
@font-face. Determines how the browser behaves when faced with fonts that take a long time to load.
@font-face. Sets the line spacing of the font.@font-face. Defines the range of character codes to be downloaded into a font.