CSS - Propriété font

Description de la propriété font.

font peut être utilisée, soit comme une propriété raccourcie regroupant plusieurs propriétés relatives à la police de caractères, soit comme une propriété à part entière pour attribuer une police système.

Propriété raccourcie.

La taille des caractères et le nom de la police doivent être spécifiés. Les autres valeurs peuvent être omises mais celles qui sont définies doivent l'être dans l'ordre suivant :

• font-style : inclinaison des caractères (italique).
• font-variant : petites capitales.
• font-weight : graisse des caractères.
• font-stretch : étirement ou compression des caractères.
• font-size / line-height : taille des caractères et hauteur des lignes de texte.
• font-family : nom de la police de caractères.

Attention ! La syntaxe permet de ne spécifier que certains paramètres, mais il faut savoir que les paramètres non mentionnés ne resteront pas inchangées : ils seront remis à leur valeur initiale. Ainsi la déclaration de gauche est équivalente aux sept déclarations de droite.

font présente en plus la particularité d'initialiser d'autres propriétés, qui pourtant ne figurent pas dans sa syntaxe : font-size-adjust, font-kerning, font-feature-settings et toutes les propriétés dérivées de font-variant (font-variant-numeric, font-variant-caps, etc).

Conclusion : si vous ne souhaitez changer que certaines valeurs, utilisez les propriétés individuelles.

Autre particularité : font n'accepte que les deux valeurs normal et small-caps pour le paramètre font-variant, alors que la propriété individuelle en reconnait beaucoup plus.

Police système.

font accepte également quelques mots clé correspondant aux polices utilisées par le système dans des cas précis : libellés des menus, texte dans les boîtes de dialogue, etc. Dans ce cas, on peut ne spécifier qu'une seule valeur, bien qu'il soit possible également d'en préciser plusieurs.

Téléchargement de polices.

Il est possible de mettre en œuvre des polices de caractères personnalisées qui seront téléchargées sur le poste de l'internaute, soit avec la directive @font-face, soit avec une balise link ajoutée dans la section head de la page HTML.

Syntaxes pour font.

• font: caption;

  Police de caractères utilisée dans les accessoires de saisie comportant un titre, comme les boutons, etc.

• font: icon;

  Police de caractères utilisée pour les libellés d'icône.

• font: menu;

  Police de caractères utilisée pour les libellés de menus.

• font: message-box;

  Police de caractères utilisée dans les boîtes de dialogue.

• font: small-caption;

  Police de caractères utilisée pour les libellés des accessoires de saisie de petite taille.

• font: status-bar;

  Police de caractères utilisée pour la barre d'état.

• font: 2em menu;

  Exemple d'une syntaxe précisant la police de caractères système menu dans une taille deux fois plus grande.

• font: italic small-caps bold expanded 18px/14px 'Times';

  Exemple d'une syntaxe équivalente à l'ensemble des déclarations ci-dessous :

  font-style: italic; font-variant: small-caps; font-weight: bold; font-stretch: expanded; font-size: 18px; line-height: 14px; font-family: 'Times';
• font: initial; font: unset; font: inherit;

  Reportez-vous à la description générale de ces valeurs.

Exemples.

Les formats de police utilisables sur le Web.

Tous les formats de police décrits ci-après sont vectoriels. Ce qui signifie que les formes des glyphes sont mémorisées sous la forme d'une équation mathématique, et non pas sous la forme d'une matrice de points. Ceci permet de restituer les caractères dans une taille quelconque sans perte de qualité, en particulier sans l'effet de crénelage inhérent aux dessins bitmaps.

Il existe de nombreux formats de polices vectoriels mais nous avons limité notre description aux formats les plus courants sur Internet. Parmi les formats non traits, citons Postcript, UFO, et d'autres.

• TTF (TrueType font)

  Conçu par Apple et Microsoft, ce format, très utilisé il y a quelques années, est en perte de vitesse face aux nouveaux formats décrits ci-après. Son principal défaut est de ne pas être compressé, ce qui implique des fichiers volumineux et limite le téléchargement des polices TTF sur les pages Web.

• OTF (OpenType Font)

  OTF est une évolution du format TTF, développée par Adobe et Microsoft. Il peut stocker les 65000 caractères unicode, ce qui lui permet de proposer de nombreuses variantes pour un même caractère (petites majuscules, glyphes alternatifs, etc.

  Afficher le tableau de compatibilité (informations fournies par canIuse.com).

  Afficher les versions antérieures   Afficher la version à venir  

• EOT : Embedded Open Type.

  Ce format, conçu par Microsoft spécialement pour le web, n'a cependant connu qu'un succès très limité : il n'est traité que par Internet Explorer.

  Afficher le tableau de compatibilité (informations fournies par canIuse.com).

  Afficher les versions antérieures   Afficher la version à venir  

• WOFF : Web Open Font Format.

  S'appuyant sur les formats OTF et TTF, WOFF a té conçu spécialement pour le web. C'est une collaboration entre Microsoft et deux éditeurs de navigateurs : Mozilla et Opera.
  Ce format apporte l'avantage de fichiers compressés, ce qui rend envisageable le téléchargement de polices sur les pages web. D'autre part, les fichiers WOFF contiennent une table de substitution, ce qui permet de remplacer certains caractères ou certaines suites de caractères par d'autres, donnant ainsi la possibilité de traiter les ligatures ou des glyphes multiples pour chaque caractère.
  WOFF est un format standardisé par le W3C. Il est bien reconnu par tous les navigateurs modernes. Ceci en fait un format fiable et pérenne pour le web.

  Afficher le tableau de compatibilité (informations fournies par canIuse.com).

  Afficher les versions antérieures   Afficher la version à venir  

• WOFF2 : Web Open Font Format 2.0.

  Une évolution du format WOFF présentation un meilleur taux de compression. Sa prise en charge par les navigateurs est maintenant suffisante pour que ce format soit utilisable.

  Afficher le tableau de compatibilité (informations fournies par canIuse.com).

  Afficher les versions antérieures   Afficher la version à venir  

• SVG : Scalable Vector Graphics.

  Ce format, initialement prévu pour de dessin, n'est pas très adapté à la description de polices de caractères, tout au moins dans sa forme actuelle. Il est possible de définir les glyphes, mais aucun mécanisme n'est prévu pour l'ajustement fin des crénages, la substitution de caractères, etc.
  Le format est de plus très mal reconnu par les navigateurs en tant que police de caractères.

  Afficher le tableau de compatibilité (informations fournies par canIuse.com).

  Afficher les versions antérieures   Afficher la version à venir  

Simulateur.

Voir aussi...

Polices et caractères - Propriétés.

• font-display : Détermine le comportement du navigateur face aux polices de caractères longues à charger.
• font-family : Définit le nom de la police de caractères.
• font-feature-settings : Permet d'exploiter les fonctionnalités spécifiques des polices de caractères OTF, WOFF, etc.
• font-kerning : Ajustement du crénage entre caractères.
• font-size : Ajuste la taille des caractères.
• font-size-adjust : Définition du coefficient d'aspect de la police.
• font-stretch : Modifie l'étirement ou la compression des caractères.
• font-style : Sélectionne les styles italique ou oblique de la police de caractères.
• font-synthesis : Autorise ou non le calcul des styles manquants dans la police de caractères.
• font-variant : Raccourci permettant de définir les attributs typographiques évolués : ligatures, substitution de caractères, etc.
• font-variant-alternates : Met en œuvre la substitution de caractères (polices OTF, WOFF).
• font-variant-caps : Applique une capitalisation des caractères.
• font-variant-east-asian : Typographie spécifique aux caractères chinois ou japonais.
• font-variant-ligatures : Active ou désactive la ligature des caractères.
• font-variant-numeric : Met en œuvre les modes d'affichage des nombres évolués : fractions, numéros, etc.
• font-weight : Sélectionne une graisse pour les caractères.
• text-decoration : Choisit le soulignement, le surlignement ou la rayure du texte.
• text-decoration-color : Définit la couleur du trait de décoration.
• text-decoration-line : Type de décoration : souligné, barré, etc.
• text-decoration-style : Type de trait pour la décoration : plein, pointillé, etc.
• text-shadow : Ombrage du texte.
• text-transform : Casse du texte (minuscules, majuscules...).

Polices et caractères - Directives.

• @charset : Indique le jeu de caractères utilisé dans la feuille de styles.
• @font-face : Définit tous les paramètres d'une police de caractères téléchargeable.
• @font-feature-values : Définit les variantes typographiques à utiliser.