Mise en forme de la police en css-Propriété font

font-family

La propriété font-family permet de chosir la police. Une "police" (rien à voir avec le 17 :)) correspond en gros à la forme d'écriture utilisé. Pour un exemple concret, visiter ce site http://www.dafont.com/fr/
Exemple

H1 {font-family: Arial, Helvetica, sans-serif;}
Voir un exemple
Dans cet exemple, 2 polices sont utilisées. Si vos visiteurs ne possèdent pas la première police, c'est alors la seconde qui sera utilisé!
Différence entre Helvetica et Arial
Helvetica sans-serif
Police sans serif  Helvetica
Times avec serif
Police serif  Times
Différence entre Serif et sans-serif
Empattements en rouge
Source images: http://fr.wikipedia.org/wiki/Empattement_(typographie)

font-size

La propriété font-size permet de déterminer la taille de la police.
Exemple
H1 {font-size: 12px;}
Voir un exemple

font-style

La propriété font-style permet de determnir le style (inherit, italic, oblique, normal)
Exemple
H1 {font-style: italic;}
H1 {font-style: oblique;}
H1 {font-style: normal;}
H1 {font-style: inherit;}
Voir un exemple
Inherit signifit "héritage", c'est à dire que le style sera celui défini par le block parent. Si il n'en a pas, il prendra la valeur par défaut donc normal.

font-variant

La propriété font-variant permet de déterminer la variante entre normal, inherit ou small-caps. Une police small-caps utilise des lettres en capitales de taille réduite à la place des lettres en minuscules. Inherit utilisera le style défini par le block parent si il y a ou prendra la valeur par défaut donc normal. 
Exemple
H1 {font-variant: small-caps;}
H1 {font-variant: normal;}
H1 {font-variant: inherit;}
Voir un exemple

font-weight

La propriété font-weight permet de déterminer le poids de la police (bold, bolder, inherit, lighter, normal).
Exemple
H1 {font-weight: bold;}  Police grasse
H1 {font-weight: normal;}  Police normal
H1 {font-weight: inherit;}  Police utilisant celle du block parent
H1 {font-weight: bolder;}  Police plus grasse que bold
H1 {font-weight: lighter;}  Police moin grasse
Voir un exemple
Voir/déposer un commentaire (1) | Signaler un problème