Langues

Ceci est une traduction. Elle peut avoir des erreurs ou être dépassée par rapport à la version anglaise. Traducteur(-trice): Laurent Carcone

Feuilles de style pour le Web Trucs & astuces CSS

Voir également l'index de tous les trucs et astuces.

Dans cette page:

Familles de polices

Après la couleur, la propriété font est certainement l'une des plus importantes pour un document. Cette page ne contient pas "d'astuce" sur les polices de caractères mais montre l'étendue des variations que CSS autorise sur les polices.

Puisque toutes les polices ne sont pas disponibles sur tous les ordinateurs (il y en a des milliers et la plupart ne sont pas libres de droits), CSS fournit un mécanisme de repli. Vous listez la police que vous voulez en premier, puis les polices qui peuvent la remplacer si elle n'est pas disponible, et vous terminez la liste avec une police générique, lesquelles sont au nombre de cinq: serif, sans-serif, monospace, cursive and fantasy.

Le tableau ci-dessous montre divers exemples de polices (votre navigateur peut ne pas toutes les connaître). Vous pouvez voir comment votre navigateur réagit avec chacune des cinq familles génériques:

'sans-serif': polices normales sans 'évasement' (without serifs)
Helvetica, sans-serif The Quick Brown Fox Jumps Over The Lazy Dog
Verdana, sans-serif The Quick Brown Fox Jumps Over The Lazy Dog
Gill Sans, sans-serif The Quick Brown Fox Jumps Over The Lazy Dog
Avantgarde, sans-serif The Quick Brown Fox Jumps Over The Lazy Dog
Helvetica Narrow, sans-serif The Quick Brown Fox Jumps Over The Lazy Dog
sans-serif The Quick Brown Fox Jumps Over The Lazy Dog
'serif': polices normales avec 'évasement' (with serifs)
Times, serif The Quick Brown Fox Jumps Over The Lazy Dog
Times New Roman, serif The Quick Brown Fox Jumps Over The Lazy Dog
Palatino, serif The Quick Brown Fox Jumps Over The Lazy Dog
Bookman, serif The Quick Brown Fox Jumps Over The Lazy Dog
New Century Schoolbook, serif The Quick Brown Fox Jumps Over The Lazy Dog
serif The Quick Brown Fox Jumps Over The Lazy Dog
'monospace': chaque caractère à la même largeur
Andale Mono, monospace The Quick Brown Fox Jumps Over The Lazy Dog
Courier New, monospace The Quick Brown Fox Jumps Over The Lazy Dog
Courier, monospace The Quick Brown Fox Jumps Over The Lazy Dog
Lucidatypewriter, monospace The Quick Brown Fox Jumps Over The Lazy Dog
Fixed, monospace The Quick Brown Fox Jumps Over The Lazy Dog
monospace The Quick Brown Fox Jumps Over The Lazy Dog
'cursive': polices qui ont un aspect manuscrit
Comic Sans, Comic Sans MS, cursive The Quick Brown Fox Jumps Over The Lazy Dog
Zapf Chancery, cursive The Quick Brown Fox Jumps Over The Lazy Dog
Coronetscript, cursive The Quick Brown Fox Jumps Over The Lazy Dog
Florence, cursive The Quick Brown Fox Jumps Over The Lazy Dog
Parkavenue, cursive The Quick Brown Fox Jumps Over The Lazy Dog
cursive The Quick Brown Fox Jumps Over The Lazy Dog
'fantasy': polices décoratives, pour les titres, etc.
Impact, fantasy The Quick Brown Fox Jumps Over The Lazy Dog
Arnoldboecklin, fantasy The Quick Brown Fox Jumps Over The Lazy Dog
Oldtown, fantasy The Quick Brown Fox Jumps Over The Lazy Dog
Blippo, fantasy The Quick Brown Fox Jumps Over The Lazy Dog
Brushstroke, fantasy The Quick Brown Fox Jumps Over The Lazy Dog
fantasy The Quick Brown Fox Jumps Over The Lazy Dog

Styles des polices

La plupart des polices ont des styles différents à l'intérieur d'une même famille, typiquement un style gras et un style italique, souvent également un style gras-italique, moins souvent un style 'minuscule', et dans quelque cas des versions extra-fines/extra-grasses ou étendues/condensées.

Le tableau ci-dessous montre différents styles. A moins que nous n'ayez une large collection de polices, beaucoup de lignes seront identiques.

rule serif sans-serif
Styles
font-style: normal The Quick… The Quick…
font-style: italic The Quick… The Quick…
font-style: oblique The Quick… The Quick…
Weights
font-weight: 100 The Quick… The Quick…
font-weight: 200 The Quick… The Quick…
font-weight: 300 The Quick… The Quick…
font-weight: normal The Quick… The Quick…
font-weight: 500 The Quick… The Quick…
font-weight: 600 The Quick… The Quick…
font-weight: bold The Quick… The Quick…
font-weight: 800 The Quick… The Quick…
font-weight: 900 The Quick… The Quick…
Variants
font-variant: normal The Quick… The Quick…
font-variant: small-caps The Quick… The Quick…
Stretch
font-stretch: ultra-condensed The Quick… The Quick…
font-stretch: extra-condensed The Quick… The Quick…
font-stretch: condensed The Quick… The Quick…
font-stretch: semi-condensed The Quick… The Quick…
font-stretch: normal The Quick… The Quick…
font-stretch: semi-expanded The Quick… The Quick…
font-stretch: expanded The Quick… The Quick…
font-stretch: extra-expanded The Quick… The Quick…
font-stretch: ultra-expanded The Quick… The Quick…

Dans CSS3, il y a un style supplémentaire: 'font-effect', les lettres paraissent gravées ou en relief.

Bert Bos, coordinateur de l'activité style
Copyright © 1994–2012 W3C®

Created 17 Jan 2001;
Last updated jeu. 12 déc. 2013 06:20:47 CET

Langues

À propos des traductions