Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

font - Propriété CSS

font

Résumé des caractéristiques de la propriété font

Description rapide
Raccourci pour définir la plupart des propriétés concernant les polices de caractères.
Statut
Standard
Type de valeur
Voir les propriétés individuelles.
Valeurs prédéfinies
caption | icon | menu | message-box | small-caption | status-bar
Pourcentages
Voir les propriétés individuelles.
Valeur initiale
Voir les propriétés individuelles.
Héritée par défaut
Oui
Type d'animation
Voir les propriétés individuelles.
Module W3C
Module CSS - Polices de caractères
Références (W3C)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: REC (recommandation)

Statut du document:: Ancienne norme, obsolète

Description de la propriété font.

font peut être utilisée, soit comme une propriété résumée 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é résumée.

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 :

Attention ! La syntaxe permet de ne spécifier que certains paramètres, mais il faut savoir que, comme c'est le cas pour toutes les propriétés résumées, les paramètres non mentionnés ne resteront pas inchangées : ils seront fixés à leur valeur initiale.

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.

Ainsi la déclaration font:12pt 'Arial' est équivalente à toutes les déclarations ci-dessous.

font-style: normal; font-variant-alternates: normal; font-variant-caps: normal; font-variant-east-asian: normal; font-variant-ligature: normal; font-variant-numeric: normal; font-variant-position: normal; font-weight: normal; font-stretch: normal;
font-size: 12pt; line-height: normal; font-family: 'Arial'; font-language-override: normal; font-feature-settings: normal; font-optical-sizing: auto; font-size-adjust: none; font-kerning: auto; font-variation-settings: normal;

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é détaillée en reconnaît beaucoup plus.

Le calcul des pourcentages ne se fait pas de la même façon pour chacun des paramètres. Par exemple la taille des caractères exprimée en pourcentage sera calculée par rapport à la taille des caractères de l'élément parent, tandis que la hauteur de ligne en pourcentage sera calculée par rapport à la hauteur de ligne de l'élément lui-même. Reportez-vous à la description de chacune des propriétés individuelles pour avoir plus de précisions sur ces calculs de pourcentages.

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 : le nom de la police. La taille des caractères, les attributs stylistiques, etc. étant prédéfinis par la police système.

Il est possible toutefois de changer les paramètres autres que le nom de la police en utilisant les propriétés individuelles. Mais ces propriétés individuelles doivent venir après font, car cette dernière ré-initialise toutes les valeurs. Exemple :

font:menu; font-size:2em;

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 de font pour activer une police système.

Syntaxe de fontSchéma syntaxique de la propriété CSS font (définition des polices de caractères). caption caption icon icon menu menu message-box message-box small-caption small-caption status-bar status-barfont:;font:;
  • font: caption;

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

    Police de caractères caption, en taille native
    En taille plus grande
  • font: icon;

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

    Police de caractères icon, en taille native
    En taille plus grande
  • font: message-box;

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

    Police de caractères message-box
    En taille plus grande
  • font: small-caption;

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

    Police de caractères small-caption
    En taille plus grande
  • font: status-bar;

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

    Police de caractères status-bar
    En taille plus grande
  • font: menu; font-size: 14pt;

    Exemple d'une syntaxe précisant la police de caractères système menu dans une taille deux fois plus grande. Il est nécessaire d'écrire deux règles successives et dans cet ordre, sinon la règle avec font annule la règle avec font-size.

    Police de caractères menu, taille 14pt

Syntaxes de font en tant que propriété résumée.

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

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

    Résultat
    font-style: italic; font-variant-alternates: normal; font-variant-caps: small-caps; font-variant-east-asian: normal; font-variant-ligature: normal; font-variant-numeric: normal; font-variant-position: normal; font-weight: bold; font-stretch: expanded;
    font-size: 18px; line-height: 14px; font-family: 'Times'; font-language-override: normal; font-feature-settings: normal; font-optical-sizing: auto; font-size-adjust: none; font-kerning: auto; font-variation-settings: normal;

    Lorsque le nom de la police ne comporte qu'un seul mot, on peut se dispenser des apostrophes, mais comme ce n'est pas souvent le cas, autant prendre l'habitude des apostrophes. PAR CONTRE, il NE faut PAS mettre d'apostrophes pour désigner une police système (voir les syntaxes plus haut).

  • font: initial; font: inherit; font: revert; font: revert-layer; font: unset;

    La valeur initiale est : Voir les propriétés individuelles..

Exemples.

The quick brown fox jumps over the lazy dog

Voyez le brick géant que j'examine près du wharf

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 traités, 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.

  • 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.

  • 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.

  • 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.

  • 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.

1
TTF
OTF
2
EOT
3
WOFF
4
WOFF2
5
SVG
Estimation de la prise en charge en pourcentage du parc actuel.
97%
1%
98%
96%
18%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Animation sur les polices de caractères.

Il est possible d'animer toutes les valeurs utilisables avec font (taille des caractères, police, attributs de styles, etc). Reportez vous aux propriétés individuelles pour voir quelques exemples d'animations.

Simulateur.

font :
Buvez de ce whisky que le patron juge fameux (1)

(2) Pangramme anonyme.

Prise en charge par les navigateurs (compatibilité).

La propriété font en elle-même ne pose aucun problème de compatibilité. Par contre certains types de polices risquent d'être mal reconnus par certains navigateurs (reportez vous au tableau de compatibilité plus haut). Le tableau ci-dessous indique quant lui la prise en charge des principales technologies relatives aux polices de caractères.

Colonne 1
Support de la propriété font et ses multiples variantes de syntaxe.
Colonne 2
Support des polices génériques système : ui-ans-serif, ui-serif, ui-monospace, etc.
Colonne 2
Support des polices variables. Ces polices permettent d'obtenir de nombreuses variantes en ajustant les paramètres des caractères : largeur, graisse, inclinaison, etc.
Colonne 4
Support des téléchargements de polices de caractères, ce qui permet de garantir une restitution identique sur tous les terminaux, même avec des polices fantaisie.
1
font
2
ui
generic fonts
3
Variable fonts
4
Font loading
Estimation de la prise en charge en pourcentage du parc actuel.
97%
18%
97%
98%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que font.

Les spécifications CSS éditées par le W3C sont organisées en modules. font fait partie du Module CSS - Polices de caractères (CSS Fonts Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Détermine le comportement du navigateur face aux polices de caractères longues à charger.
Permet d'appliquer quelques effets au texte : relief, bordure...
Définit le nom de la police de caractères.
Permet d'exploiter les fonctionnalités spécifiques des polices de caractères OTF, WOFF, etc.
Ajustement du crénage entre caractères.
Définit le langage à prendre en compte lors du choix des caractères.
Optimise la forme des caractères en fonction de leur taille.
Définit la palette de couleurs utilisable pour les polices de caractères colorées.
Ajuste la taille des caractères.
Définition du coefficient d'aspect de la police.
Modifie l'étirement ou la compression des caractères.
Sélectionne les styles italique ou oblique de la police de caractères.
Autorise ou non le calcul des styles manquants dans la police de caractères.
Autorise ou non le navigateur à synthétiser les caractères en exposant ou en indice.
Autorise ou non le navigateur à calculer le glyphes des caractères en petites capitales.
Définit si le navigateur est autorisé à synthétiser les formes italiques des caractères.
Définit si le navigateur peut calculer ou non le glyphe des caractères gras.
Raccourci permettant de définir les attributs typographiques évolués : ligatures, substitution de caractères, etc.
Définit la substitution de caractères (polices OTF, WOFF).
Applique une capitalisation des caractères.
Typographie spécifique aux caractères chinois ou japonais.
Choisit entre une présentation en emoji ou en texte.
Active ou désactive la ligature des caractères.
Définit le mode d'affichage des nombres évolués : fractions, numéros, etc.
Mise en exposant ou en indice des caractères.
Donne accès aux possibilités stylistiques des polices OTF
Sélectionne une graisse pour les caractères.
Synonmye de font-stretch (largeur/élargissement des caractères).

Directives.

Définit tous les paramètres d'une police de caractères téléchargeable.
Définit les variantes typographiques à utiliser.
Définit une palette de couleurs appliable ensuite à une police de caractères.