OUJOOD.COM
La propriété CSS: font-weight
Les propriétés CSS
Avec la propriété font-weight il est possible de donner au texte une valeur normale, grasse avec bold, ou encore plus gras avec bolder ou bien lighter
Définition et utilisation:La propriété font-weight
La propriété de feuille de style css font-weight permet de spécifier la graisse (mettre en gras)
Dans le code CSS suivant on va utiliser les classes
Code css :Exemple 📋 Copier le code
p.normal {font-weight:normal}
p.thick {font-weight:bold}
p.thicker {font-weight:900}
| Valeurs par défaut | normal |
|---|---|
| Inherited: | oui |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS1 |
| Syntaxe JavaScript: | object.style.fontWeight="900" |
Valeurs de la propriété :
| Valeur | Description |
|---|---|
| normal | Définit les caractères normaux. Par défaut |
| bold | Définit les caractères épais |
| bolder | Définit les caractères plus épais |
| lighter | Définit les caractères légers |
| 100 200 300 400 500 600 700 800 900 |
Définit un échelle d'épaisseur des caractères. 400 est la même valeur que la normale, et 700 est le même valeur que le gras |
Il est également possible de combiner la propriété "font-weight" avec d'autres propriétés de police, comme "font-family" ou "font-size", pour obtenir un résultat encore plus personnalisé.
Voici un exemple avec animation de la propriété css "font-weight":
Exemple 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title> Animation du poids de la police</title>
<style>
#monDIV {
border: 1px solid black;
width: 500px;
font-size:20px;
animation: monAnimation 5s infinite;
}
@keyframes monAnimation {
50% {font-weight: 900;}
}
</style>
</head>
<body>
<h1>Animation du poids de la police : propriété css font-weight</h1>
<p>Modifiez progressivement l'épaisseur de la police de normal à gras, puis revenez à la normale :<p>
<div id="monDIV">
<p>Voici un paragraphe avec du texte.</p>
</div>
</body>
</html>
Par carabde 10 mars 2014