Famille de polices (CSS) - Définition

Source: Wikipédia sous licence CC-BY-SA 3.0.
La liste des auteurs de cet article est disponible ici.

Introduction

Dans les documents numériques mis en page et enrichis avec des indications de style CSS (par exemple HTML, XHTML, ou SVG) selon les standards du World Wide Web Consortium (W3C), une famille de polices ou famille de fontes (propriété font-family: en CSS, ou l’ancien atttribut face de l’élement HTML déprécié font) sert à préciser la police d’écriture qui sera finalement utilisée par le moteur de rendu (d'un navigateur Internet par exemple) pour mettre en forme le texte du document. La famille de polices peut servir aussi bien pour l’affichage du texte à l’écran, que pour le rendu imprimé du texte ou sa reproduction graphique sur un autre dispositif.

Utilisation

La famille de polices indiquée, conjointement avec d’autres attributs ou propriétés de style de présentation (dont notamment la hauteur d’œil, le niveau de graisse, ou des variantes de style de police), ainsi que la nature du texte ainsi mis en forme (notamment l’écriture codée dans le texte lui-même, ou le balisage de la langue utilisée, qui peuvent influencer le choix de la police finalement sélectionnée) sera utilisée pour déterminer une police d’écriture adéquate, puis la fonte de caractères supportée par cette police et à appliquer au texte présent dans le document pour son rendu final et sa mise en page. Par exemple :

      <style type="text/css></style>      <p class="text">      Exemple de texte formatté avec CSS dans une feuille de style séparée.      </p>             <p style="font-family: Times, serif; font-size:14pt; font-style:italic; font-variant: normal">      Exemple de texte formatté avec CSS en ligne.      </p>             <p><i><font face="Times, serif" size="3">      Exemple de texte formatté avec la balise FONT dépréciée.      </font></i></p>      

En CSS, une famille de polices (indiquée par la valeur de la propriété font-family: ou celle de l’attribut face en HTML) consiste en fait en un jeu informel de polices informatiques, mentionnées par un de leurs noms possibles (certaines polices peuvent avoir plusieurs noms simultanément pour différentes langues), et qui des apparences typographiques comparables, ou disposent au minimum du support de la même écriture ou des caractères référencés par le texte.

La même famille de polices inclut ses différentes tailles et ses différents styles (romain, italique, petites capitales, décorations cursives supplémentaires, variantes traditionnelles), ainsi que ses différents graisses (telle que régulier, fin, ou gras).

Le navigateur internet ne sera capable d’appliquer une police informatique que si celle-ci est disponible, ce qui n'est pas toujours le cas. Les créateurs de documents peuvent cependant mentionner une liste de polices, dans un ordre préférentiel, à utiliser pour le rendu du texte et la mise en page. La liste des polices est séparée par des virgules (comme dans l’exemple ci-dessus).

Pour éviter des résultats inattendus, la liste peut se terminer par l’indication d’une ou plusieurs des 5 familles de polices génériques standards qui permettent généralement de classer les différentes familles de polices. Toutefois, ces familles génériques ne sont souvent bien adaptées qu’aux systèmes d’écritures alphabétiques qui disposent de ces différences possible de style pour un même texte. Certaines écritures n'offrent pas toujours une telle variété, et finalement le moteur de rendu pourra souvent, si aucune police indiquée ne convient pour rendre correctement le texte, opter pour une police par défaut dont le choix lui sera propre ou dépendra des réglages et préférences de l’utilisateur.

Selon les moteurs de rendu utilisés (dans un navigateur par exemple), un utilisateur peut parfois outrepasser la police définie par l’auteur du document. Cela peut être fait pour des raisons personnelles de goût, mais peut aussi être nécessaire à cause de limitations physiques de l’utilisateur — par exemple le besoin d’utiliser une taille d’œil différente, ou éviter certaines combinaisons de couleurs — ou pour des raisons culturelles — par exemple les difficultés à lire certains styles auquel l’utilisateur n’a pas été habitué.

Syntaxe et valeurs possibles parmi les familles de polices

Les noms de polices indiqués, s’ils contiennent autre chose que des lettres ou chiffres et ne permettent pas de les traiter comme des identificateurs, par exemple des espaces ou ponctuations, doivent être mentionnés entre marques de citation simples ou double (apostrophe ou guillemets doubles, dans leur forme dépouillée issue du jeu de caractères ASCII), conformément à la syntaxe attendue en CSS ou HTML. La virgule sert cependant de séparateur obligatoire si plusieurs noms de familles de police sont listés.

De plus les versions récentes de CSS permettent aussi, grâce à la propriété @font-face{ ... } incluse dans une feuille de style, de définir des noms de familles de polices supplémentaires utilisables dans un document, à partir d’une collection de polices et de leurs propriétés, afin :

  • d’améliorer la sélection de la police informatique qui sera finalement utilisée parmi les polices supportées sur la machine de l’utilisateur, ou
  • d’éviter d’avoir à répéter ces listes de polices dans différentes règles de style ou dans le document lui-même, ou
  • d’inclure une police plus précise et spécifique qui sera transportée avec le document incorporant la feuille de style (lorsque les restrictions de droit d’auteur relatif au fichier de police informatique l’y autorisent).

Tout autre nom listé dans les valeurs de la propriété font-family: indique un des noms de polices informatiques spécifiques installées sur la machine de l’utilisateur. Une famille de police peut ainsi mentionner un nom de police spécifique mais le résultat dépendra fortement des polices installées sur la machine de l’utilisateur et du logiciel utilisé pour le rendu final du document (un logiciel pourra ne pas reconnaître certains formats de fichiers de police installés sur la même machine pour un autre logiciel).

Les polices informatiques possèdent parfois simultanément plusieurs noms synonymes (par exemple des traductions, ou translitérations), qui doivent être reconnus de façon identique par les moteurs de rendus.

De plus, pour des raisons de compatibilité avec d’autres logiciels ou systèmes, les moteurs de rendu peuvent reconnaître des synonymes supplémentaires. Par exemple, une installation par défaut de Microsoft Internet Explorer, affichera toujours serif ou Times avec la police Times New Roman, et sans-serif ou Helvetica avec la police Arial.

Familles de polices génériques

Les cinq familles de polices génériques prédéfinies en CSS sont les suivantes (pour des raisons de simplification, elles ne sont présentées ici que dans un style normal et une taille unique).

Famille (CSS) Description Exemple (dependant des polices installées) avec faux-texte
sans-serif Famille générique comprenant des polices sans empattement pour le texte d’usage général (souvent préférées pour le rendu à l'écran à cause de limitations de résolution d’affichage). La chasse sera le plus souvent proportionnelle, mais pourra être fixe avec certains systèmes d’écriture ou sur certains dispositifs. The quick brown fox jumps over the lazy dog. 0123456789. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
serif Famille générique comprenant des polices à empattement pour le texte d’usage général (souvent préférées dans les documents imprimés). La chasse sera le plus souvent proportionelle, mais pourra être fixe avec certains systèmes d’écriture ou sur certains dispositifs. The quick brown fox jumps over the lazy dog. 0123456789. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
monospace Famille générique comprenant des polices à chasse fixe (permettant d’aligner verticalement les caractères de lignes successives, notamment dans la présentation de données et certains codes sources). Les polices peuvent avoir une présentation avec ou sans empattement selon leur destination. The quick brown fox jumps over the lazy dog. 0123456789. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
cursive Famille générique comprenant des polices dites « cursives », cherchant à imiter l’écriture manuscrite (jointive ou non). The quick brown fox jumps over the lazy dog. 0123456789. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
fantasy Famille générique comprenant des polices dites « fantaisies » ou décoratives (comprenant des enrichissements ou formes inhabituelles), et habituellement non destinée à la lecture de longs textes. The quick brown fox jumps over the lazy dog. 0123456789. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
Page générée en 0.106 seconde(s) - site hébergé chez Contabo
Ce site fait l'objet d'une déclaration à la CNIL sous le numéro de dossier 1037632
A propos - Informations légales
Version anglaise | Version allemande | Version espagnole | Version portugaise