font-weight
Définit la graisse de la police, du plus fin au plus gras.
- Valeur initiale
normal- Héritée
- Oui
- Animable
- oui, en tant que nombre
- S’applique à
- tous les éléments
- JavaScript
element.style.fontWeight = "600"
Exemple
#h2 {
font-weight: 600;
}
.price {
font-weight: 800;
}<h2 style="font-weight: 600; margin: 0">Offre Premium</h2>
<p style="margin: 6px 0 0"><span class="price" style="font-weight: 800; font-size: 24px;">29 €</span> par mois</p>Définition et utilisation
#La propriété font-weight définit l’épaisseur des caractères. Elle accepte les mots-clés normal (400) et bold (700), ou des nombres de 1 à 1000, le plus souvent par centaines : 100 est très fin, 900 très gras.
Une graisse ne s’affiche correctement que si la police possède réellement cette version. Si ce n’est pas le cas, le navigateur choisit la plus proche disponible ou simule le gras, ce qui donne généralement un résultat moins net.
Les polices variables (variable fonts) contiennent une plage continue de graisses dans un seul fichier, ce qui permet d’utiliser n’importe quelle valeur, par exemple 550.
Syntaxe
#font-weight: normal | bold | lighter | bolder | <nombre 1-1000>;Valeurs
#Valeurs en pratique
#300
.demo { font-weight: 300; }normal
.demo { font-weight: normal; }600
.demo { font-weight: 600; }bold
.demo { font-weight: bold; }900
.demo { font-weight: 900; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- N’incluez que les graisses que vous utilisez réellement. Chacune représente un fichier à télécharger en plus, sauf si vous utilisez une police variable.
- La balise
<strong>signale l’importance du contenu. Pour un gras purement visuel, sans signification, utilisez CSS.
Entrées associées
#- fontRaccourci qui définit le style, la graisse, la taille, l’interligne et la police en une seule fois.
- font-familyChoisit une police, avec une liste de polices de secours en cas d’indisponibilité de la première.
- font-styleActive l’italique ou l’inclinaison du texte.
- font-sizeDéfinit la taille de la police.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.