Font-family - Propriété CSS
Résumé des caractéristiques de la propriété font-family
font-family passe d'une valeur à l'autre sans transition.Schéma de la syntaxe de font-family.
font-family.Cliquez sur les liens du schéma pour plus de précisons sur les valeurs. Télécharger le schéma en SVG
Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :
stringest le nom d'une police de caractères (apostrophes ou guillemets recommandés).- Plusieurs polices peuvent être indiquées, en les séparant par des virgules.
Description de la propriété font-family.
font-family définit la police de caractères de l'élément.
Plusieurs polices peuvent être spécifiées, séparées par des virgules : le navigateur utilisera la première qui est disponible sur le poste.
Il est recommandé de terminer cette liste par une police générique (police que tous les navigateurs sont censés interpréter au mieux).
font-family: 'Arial', 'Helvetica', sans-serif;
Attention ! Les noms des polices peuvent être inscrits entre apostrophes ou guillemets, particulièrement s'ils contiennent des espaces. Mais le nom des polices génériques ne doit PAS être inscrit entre apostrophes ni guillemets.
Il est possible également de définir une police personnalisée qui sera téléchargée par le navigateur.
On peut ainsi être certain que la restitution sera fidèle. Ceci peut se faire avec la directive
@font-face, ou une balise link ajoutée dans la section head de la page.
Si vous souhaitez plus d'informations sur les formats de police de caractères, reportez vous à
la propriété font.
Les différents usages de font-family.
Le mot font-family correspond à la propriété décrite sur cette page, mais peut aussi être un descripteur utilisable avec les directives suivantes :
@font-face: Définit tous les paramètres d'une police de caractères téléchargeable.@font-palette-values: Définit une palette de couleurs applicable ensuite à une police de caractères.
Syntaxe générale de font-family.
- font-family: 'Arial', sans-serif;
Si la police de caractères
Arialest disponible sur le poste de l'internaute, elle sera la police utilisée pour cet élément. Plusieurs polices peuvent être énumérées, séparées par des virgules. Le navigateur choisit la première qui est disponible sur le poste de l'internaute. Il est vivement conseillé de terminer cette liste par une police générique (voir ci-après).Les apostrophes autour du nom de la police sont conseillés et obligatoire si le nom de la police contient des espaces ou s'il peut prêter à confusion avec le nom d'une police générique. Par contre la police générique qui termine la liste ne doit PAS être spécifiée entre guillemets ni apostrophes.
Polices génériques.
- font-family: serif;
Caractères avec empattements, dans le genre de
Times,Times New Roman,Book Antiqua, etc.
Ces polices sont généralement à espacement proportionnel (la largeur de chacune des lettres n'est pas identique) et présentent des variations dans les épaisseurs des traits (pleins et déliés).Exemple : Portez ce vieux whisky au juge blond qui fume.
- font-family: sans-serif;
Caractères sans empattements, dans le genre de
Arial,Helvetica, etc.
Ces polices sont en principe sans variation de l'épaisseur des traits (pas de pleins et déliés) ou des variations très faibles. Elles sont à espacement proportionnel.Exemple : Portez ce vieux whisky au juge blond qui fume.
- font-family: cursive;
Police dont la forme des caractères fait penser à une écriture manuscrite, dans le genre de
Brush Script.Exemple : Portez ce vieux whisky au juge blond qui fume.
- font-family: fantasy;
Comme son nom l'indique, il s'agit d'une police décorative. cette définition étant relativement vague, le rendu d'une machine à l'autre peut être très différent en fonction des polices installées sur la machine.
Exemple : Portez ce vieux whisky au juge blond qui fume.
- font-family: monospace;
Police à espacement fixe : tous les caractères ont la même largeur. Dans le genre de
courrier,Lucida Console, etc.
Ces polices peuvent être utiles lorsqu'il est nécessaire d'aligner des chiffres en colonnes ou pour afficher du code informatique.Exemple : Portez ce vieux whisky au juge blond qui fume.
- font-family: emoji;
Police incluant les pictogrammes et des symboles graphiques tels que des smileys.
😀 😁 😂 😃 😄 😇 😈
(quelques caractères dans la plage1F600à1F97F) - font-family: math;
Police comportant des symboles mathématiques.
∛ ∞ ∮ ≈ ⋶
(quelques caractères de la plage2200à22FF)
Polices système.
Ces polices génériques sont, dans la mesure du possible, associée à une police du système qui présente les caractéristiques nécessaires (présence d'empattements, caractères arrondis, etc). Si une telle police n'est pas trouvée, le navigateur propose une police par défaut.
- font-family: system-ui;
Police par défaut du système d'exploitation. On utilise cette police générique pour que l'aspect du document soit identique à celui du système.
Exemple : Portez ce vieux whisky au juge blond qui fume.
- font-family: ui-serif;
Police avec empattements utilisée par le système d'exploitation.
Exemple : Portez ce vieux whisky au juge blond qui fume.
- font-family: ui-sans-serif;
Police sans empattements utilisée par le système d'exploitation.
Exemple : Portez ce vieux whisky au juge blond qui fume.
- font-family: ui-monospace;
Police à espacement fixe utilisée par le système d'exploitation.
Exemple : Portez ce vieux whisky au juge blond qui fume.
- font-family: ui-rounded;
Police avec des caractères de forme arrondie, utilisée par le système d'exploitation.
Exemple : Portez ce vieux whisky au juge blond qui fume.
- font-family: generic(fangsong); font-family: generic(kai); font-family: generic(nastaliq);
Police traitant certaines particularités liées à l'écriture chinoise.
fangsong: écriture souvent utilisé pour les documents officiels du gouvernement chinois.kai: famille de polices utilisées en chinois simplifié et traditionnel.nastaliq: famille de polices correspondant la manière standard d'écrire l'ourdou et le cachemiri, mais qui peuvent être utilisées également en écriture persan ou quelques autres langues.
Ces polices sont rarement installées sur les ordinateurs non spécifiques aux langues CJK.
- font-family: initial; (Variable suivant le navigateur.) font-family: inherit; font-family: revert; font-family: revertLayer; font-family: unset;
Les valeurs communes sont présentées sur ces pages :
initial,inherit,revert,revert-layer,unset.
Les polices téléchargeables.
Lorsque des polices de caractères très spécifiques sont utilisées sur une page, on peut être à peu près sûr qu'elles ne seront pas disponibles sur le poste de tous les internautes. On peut alors demander le téléchargement de cette police afin que le rendu soit fidèle sur toutes les machines.
Le chargement d'une police de caractères peut se faire de plusieurs façons. Tout d'abord, en CSS pur, avec la directive @font-face.
Il est possible de préciser certaines caractéristiques de la police (dans notre exemple il s'agit d'une police en caractères gras) :
@font-face {
font-family:'Ma Police';
src:url('https://domaine/chemin/police-bold.ttf');
font-weight:bold;
}
Les polices Google Fonts peuvent également être téléchargées avec une balise link dans l'en-tête de la page.
Dans l'exemple ci-dessous "Sofia" est le nom de la police.
<link href="https://fonts.googleapis.com/css?family=Sofia" rel="stylesheet">
Ou bien, toujours pour Google Fonts, une directive @import dans la feuille de styles.
Notez que ces codes (balise link ou directive @import) sont générés automatiquement par Google Fonts
en fonction des polices que vous sélectionnez.
@import url('https://fonts.googleapis.com/...');
On peut ensuite utiliser la police téléchargée avec la propriété font-family :
font-family:'Sofia';
Consultez également le descripteur font-display qui permet de définir le comportement du navigateur pendant le temps de chargement de la
police, ou en cas d'impossibilité de chargement de cette dernière.
Google met à disposition des développeurs web de nombreuses polices de caractères, utilisables librement
(licences Apache
ou SIL OFL (Open Font License)).
Voir l'impressionnante liste et les échantillons des polices Google.
Exemple d'Exemple d'animation de font-family.
La propriété font-family peut être animée. Bien entendu le passage d'une police à une autre se fera
de façon brutale, puisqu'il ne s'agit pas d'une valeur numérique.
Accéder à la propriété font-family par programme.
Javascript peut modifier la valeur de la propriété CSS font-family, comme celle de toutes les autres propriétés.
Il faut juste veiller à ne pas créer de confusion entre les guillemets ou les apostrophes faisant partie de la syntaxe Javascript, et ceux
qui entourent le nom de la police en CSS. Plusieurs solutions assez simples existent puisque CSS et Javascript acceptent indifféremment les
guillemets et les apostrophes. Dans nos exemples, nous avons choisi d'utiliser l'apostrophe en tant que délimiteur pour le CSS et le guillemet comme
délimiteur pour Javascript.
Remarque : le problème ne se pose pas pour les polices génériques puisque, en CSS, leur nom doit être écrit sans guillemets ni apostrophes.
Avec Javascript, modifier la valeur de font-family.
Javascript reconnaît deux syntaxes. Dans la première le nom de la propriété est écrit avec un tiret pour séparer les mots, comme en CSS. Dans la deuxième c'est une majuscule qui séparer les mots.
let el = document.getElementById('id');
el.style['font-family'] = "'Times New Roman'";
// ou
let el = document.getElementById('id');
el.style.fontFamily = "'Times New Roman'";
Avec Javascript, lire la valeur de font-family.
Voici un exemple de code Javascript qui renvoie la valeur de la propriété font-family lorsque cette dernière est définie dans
le code HTML, via l'attribut style de l'élément.
Si la propriété a été définie via un sélecteur CSS, sa valeur n'est pas retrouvée par ce code (pour cela voyez le code d'après).
let el = document.getElementById('id');
let value = el.style['font-family'];
// ou
let el = document.getElementById('id');
let value = el.style.fontFamily;
Avec Javascript, lire la valeur calculée de font-family.
La valeur calculée est celle qui résulte de l'évaluation de la cascade des héritages. Elle est toujours définie : cela peut être la valeur affectée directement
via un sélecteur CSS ou l'attribut style, une valeur héritée, ou en dernier recours, la valeur initiale de la propriété.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('font-family');
Avec JQuery, modifier la valeur de font-family.
Comme en Javascript, le nom de la propriété peut être écrit en kebab-case ou en camel-case.
$('#id').css('font-family', "'Times New Roman'");
// ou
$('#id').css('fontFamily', "'Times New Roman'");
Avec JQuery, lire la valeur calculée de font-family.
let value = $('#id').css('font-family');
Testez vous-même.
Les boutons ci-dessous appliquent la valeur saisie à la propriété font-family et affichent ensuite la valeur appliquée ou la valeur calculée.
Cette dernière permet de voir comment est mémorisée (sérialisée) la valeur de font-family.
Exemple interactif avec la propriété font-family.
Compatibilité des navigateurs avec font-family.
La propriété font-family en elle-même ne pose aucun problème de compatibilité. Il faut cependant être vigilant quant au
choix de la police : certaines polices génériques sont mal reconnues ou dépendantes du système.
font-family.math pour la propriété font-family.system-ui représentant la police par défaut du système d'exploitation.ui : ui-serif, ui-sans-serif, ui-monospace, ui-rounded, etc.font-familymathsystem-uiui...Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
KaiOS Browser
Opéra Mobile
Opéra
Safari
Safari sur IOS
Firefox pour Androïd
Samsung Internet
Chrome
Edge
Firefox
Androïd Brower
Chrome pour Androïd
Baidu Browser
QQ Browser
UC Browser pour Androïd
Opéra mini
Histoire de la propriété font-family.
La propriété font-family est ancienne (déjà présente dans la première spécification du langage CSS), mais les valeurs acceptées ont beaucoup évolué :
introduction de plus en plus de polices génériques et système.
-
CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1
Ce premier niveau de la spécification CSS décrit le mécanisme des feuilles de styles en cascade. Les auteurs et les lecteurs peuvent ajouter des styles aux documents. Principalement destiné à la mise en forme des documents HTML, CSS permet de définir les couleurs, les polices de caractères, la mise en forme du texte, les espacements (marges), etc. Le langage CSS est d'une compréhension aisée, lisible et facile à rédiger, il utilise les termes courants de la publication de bureau.
Concernantfont-family. Définition initiale de la propriété, avec les valeurs prédéfinies suivantes :serif,sans-serif,cursive,fantasyetmonospace.
17 Novembre 1995Document de travail.
12 Novembre 1996Proposé à la recommandation.
17 Décembre 1996Recommandation.
13 Septembre 2018Ancienne spécification, déclarée obsolète. -
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1
Ce niveau 2 de la spécification décrit le mécanisme des styles en cascade de CSS. Ce langage est utilisé pour formater les documents HTML ou XML. Il prend en charge les feuilles de style spécifiques aux médias afin que les auteurs puissent adapter la présentation de leurs documents aux navigateurs visuels, aux dispositifs auditifs, aux imprimantes, aux appareils braille, aux appareils portables, etc.
Concernantfont-family. Prise en charge de la valeurinherit.04 Novembre 1997Document de travail.24 Mars 1998Proposé à la recommandation.11 Mai 1998Recommandation. -
Module CSS - Polices de caractères - Niveau 3
Concernantfont-family. Pas de changement concernantfont-family.21 Juillet 1997Document de travail.
03 Octobre 2013Candidat à la recommandation.14 Août 2018Proposé à la recommandation.20 Septembre 2018Recommandation. -
Module CSS - Polices de caractères - Niveau 4
Concernantfont-family. Prise en charge des polices de caractère système :caption,icon,menu, etc.11 Juillet 2017Document de travail. -
Module CSS - Polices de caractères - Niveau 5
Concernantfont-family. Ajout de nouvelles polices génériques :math,generic(),ui....29 Juin 2021Document de travail.
Voir aussi, concernant les polices de caractères.
De nombreuse propriétés et directives concernent les polices de caractères. Elles sont regroupées dans le module Module CSS - Polices de caractères. En voici la liste :
Propriétés :
em, ex, etc.Fonctions :
Directives :
Descripteurs :
@font-face. Définit la hauteur des caractères au dessus de la ligne de base.@font-face. Définit la hauteur des caractères au dessous de la ligne de base.@font-face. Détermine le comportement du navigateur face aux polices de caractères longues à charger.@font-face. Définit l'interligne de la police.@font-face. Définit la plage des codes de caractères à télécharger dans une police.