La propriété font en CSS

Notez que cet article a été écrit pour la première fois il y a plus de 3 ans, mais n'est pas nécessairement obsolète.

La propriété Font CSS
La propriété Font CSS

La propriété font que l’on rencontre souvent dans la définition CSS du body est un raccourci des propriétés de police de caractères, ex:

font combine les propriétés de police suivantes:

  • font-stretchultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded  |ultra-expanded | initial | inherit;
  • font-stylenormal | italic | oblique | initial | inherit;
  • font-variantnormal | small-caps | initial | inherit;
  • font-weightnormal | bold | bolder | lighter | number | initial | inherit;
  • font-sizemedium | xx-small | x-small | small | large | x-large| xx-large | smaller | larger | length | initial | inherit;
  • line-heightnormal | number length | initial | inherit;
  • font-familyfont | initial | inherit;

Les valeurs des propriétés sont assez parlantes. initial permet de prendre la valeur par défaut, inherit permet d’hériter de la propriété du parent (ce qui se passe si rien n’est spécifié), number de font-weight est un nombre: 100, 200, 300 … 900 indiquant le poids de la font (de leger à gras),  length est une taille fixe en px, cm, em etc… number pour line-height (interligne) est un facteur multiplicatif de la taille de la font.

Pour font-family, font est le nom de la font. Il peut y avoir plusieurs fonts de remplacement si la font déclarée n’est pas supportée par le navigateur, non installée sur l’ordinateur et/ou non chargée.

Si le nom de la font est en plusieurs mots, il est très recommandé d’utiliser les guillemets simples ou doubles.

Il y a deux types de font-family:

  • family-name: le nom de la font comme « times », « courier », « arial », etc.
  • generic-family: le nom de la famille de police  comme « serif », « sans-serif », « cursive », « fantasy », « monospace ».

serif est une famille de police avec empattement, adapté aux textes longs. Les empattements sont les petites extensions qui forment la terminaison des caractères: Georgia, Times New Roman, Book Antigua,  …

sans-serif est une famille de police sans empattement: Arial, Verdana, Helvetica, Tahoma, ABeeZee, Comfortaa … Les deux dernières sont des Google fonts utilisées sur ce blog.

cursive imite l’écriture manuscrite: Comic sans MS, Brush Script Std, Bradley Hand ITC, French Script MT

fantasy est une famille de police représentant des symboles: Webdings (webdings), Wingdings(wingdings)…

monospace est une famille dont tous les caractères occupent le même espacement (à chasse fixe), utilisé pour l’affichage du texte à l’écran et le codage: Courier New, Consolas, Modern, Lucida Sans Typewriter

Si certaines polices ne rendent pas dans votre navigateur, elles sont remplacées par une police standard:

On retrouve donc le schema suivant:

Les paramètres entre crochets sont optionnels, font-size et font-family sont obligatoires. Si line-height est spécifié, il suit font-size et est précédé d’un /.

Si l’on omet des valeurs optionnelles, elles ne seront pas forcément héritées de leur parent, ex:

italicsmall-caps et 800 dans la déclaration du body seront appliquées à la plupart des enfants. Pour les paragraphes p, elles seront réinitialisées à leurs valeurs par défaut car on redéclare la propriété font.

font admet également des mots-clés comme valeurs: captioniconmenumessage-boxsmall-captionstatus-bar.

Ces mots-clés seront remplacés par les polices utilisées par le système d’exploitation pour ces différentes catégories.

 

La plupart du temps, cette propriété est utilisée pour le body, permettant ainsi de définir le style de base de la page.

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *