"font-weight" ou graisse de la police

En CSS vous avez plusieurs mots-clés disponibles pour ajuster cette graisse. On parle souvent de texte en gras pour le tag <B> du HTML ou encore de "graisse", de "poids" ou "d'épaisseur" de police. Cette propriété suit les règles d'hérédité.

 

Mots-clés ou valeurs

"100" à "900"

Ces valeurs "100 à 900" forment une séquence ordonnée, où chacun des nombres indique pour la police, une graisse au moins aussi grasse que celle du nombre précédent.

normal
Equivaut à la valeur "400"

bold
Equivaut à la valeur "700"

bolder
Spécifie la graisse supérieure à celle assignée à une police, cette graisse étant plus grasse que celle héritée par la police. S'il n'y en a pas, la valeur de graisse de la propriété prend simplement la valeur numérique supérieure (l'aspect de la police ne changeant pas), sans pouvoir dépasser la valeur "900".

lighter
Spécifie la graisse inférieure à celle assignée à une police, cette graisse étant moins grasse que celle héritée par la police. S'il n'y en a pas, la valeur de graisse de la propriété prend simplement la valeur numérique inférieure (l'aspect de la police ne changeant pas),sans pouvoir descendre sous la valeur "100".

 

Code dans Head

<STYLE TYPE="text/css">

H5
{
font-family: verdana, arial, sans-serif ;
color: green ;
font-weight: bold ;
background-color: #FFFFFF ;
}

</style>

 

où la couleur des mots encadrés par le code "H5" sera en vert et en gras vu que bold = 700.

 

Code dans BODY

<H5> texte obtenu en gras et en vert</H5>

 

Résultat de l'exemple

texte en gras et en vert

 

 

Pour l'instant, notez que seul "bold" ou "700" est l'équivalent de "gras" en CSS et que vous n'obtiendrez pas beaucoup de résultats intéressants avec les autres mots-clés ou valeurs.

 

---

Définition générale de la police

Un plus, pour regrouper les propriétés dans une seule déclaration, avec par exemple : H2 {font:arial 14pt italic small-caps 900 } c'est à dire un texte en police "arial", de corps "14pt, de style "italique", de forme "petites majuscules" et en gras "bold".

 

Voici le résultat de cet exemple, dont vous retrouverez plus loin des explications plus détaillées concernant le regroupement des propriétés.

 

Sommaire CSS ... @ ... Propriété "Font-Stretch"