Polices du CSS

Les propriétés de police CSS définissent la famille de caractères, la taille, le gras, le style (comme l'italic) et la transformation (comme les petites majuscules) du texte.

Séries de polices CSS

Dans CSS, il y a deux types différents de noms de séries de polices :

  • Série de polices universelle - Combinaison de systèmes de polices similaires (par exemple "Serif" ou "Monospace")
  • Série de polices spécifique - Série de polices spécifique (par exemple "Times" ou "Courier")

En plus des séries de polices spécifiques, CSS définit 5 séries de polices universelles :

  • Polices serif
  • Polices sans-serif
  • Polices monospace
  • Polices cursives
  • Polices fantastiques

Si vous souhaitez en savoir plus sur les séries de polices, veuillez lire Séries de polices CSS.

Série de polices spécifique

Utilisation Attribut font-family Définir la série de polices du texte.

Utilisation de la série de polices universelles

Si vous souhaitez que le document utilise une police sans-serif, mais que vous n'avez pas d'importance pour laquelle, voici une déclaration appropriée :

body {font-family: sans-serif;}

Essayez-le vous-même

L'agent utilisateur choisira alors une police de la série sans-serif (par exemple, Helvetica) et l'appliquera à l'élément body. En raison de l'héritage, ce choix de police s'appliquera également à tous les éléments contenus dans l'élément body, sauf si un sélecteur plus spécifique le couvre.

Série de polices spécifique

En plus d'utiliser une série de polices universelles, vous pouvez également définir des polices plus spécifiques à l'aide de l'attribut font-family.

L'exemple suivant configure la police Georgia pour tous les éléments h1 :

h1 {font-family: Georgia;}

Essayez-le vous-même

Cette règle peut également poser un autre problème, si l'agent utilisateur n'a pas installé la police Georgia, il ne peut utiliser que la police par défaut de l'agent utilisateur pour afficher l'élément h1.

Nous pouvons résoudre ce problème en combinant un nom de police spécifique et une série de polices universelles :

h1 {font-family: Georgia,} serif;}

Essayez-le vous-même

Si le lecteur n'a pas installé Georgia, mais a installé la police Times (une police de la série serif), l'agent utilisateur peut utiliser Times pour l'élément h1. Bien que Times ne corresponde pas complètement à Georgia, il est au moins suffisamment proche.

Par conséquent, nous recommandons d'inclure une série de polices universelles dans toutes les règles font-family. Cela fournit une voie de secours, en cas où l'agent utilisateur ne peut pas fournir une police spécifique correspondant aux règles, une police candidate peut être sélectionnée.

Si vous êtes très familier avec les polices de caractères, vous pouvez également spécifier une série de polices similaires pour l'élément donné. Pour ce faire, vous devez les classer par ordre de priorité et les joindre par une virgule :

p {font-family: Times, TimesNR, 'New Century Schoolbook',}}
     Georgia, 'New York', serif;}

Essayez-le vous-même

Selon cette liste, l'agent utilisateur recherche ces polices dans l'ordre. Si toutes les polices listées ne sont pas disponibles, il choisit simplement une police serif disponible.

Utilisation des guillemets

Vous avez peut-être remarqué que dans les exemples ci-dessus, les guillemets simples sont utilisés. Seulement lorsque le nom de la police contient un ou plusieurs espaces (par exemple New York), ou si le nom de la police inclut des symboles tels que # ou $, il faut ajouter des guillemets dans l'expression font-family.

Les guillemets simples ou doubles sont acceptés. Cependant, si une propriété font-family est placée dans l'attribut style de l'HTML, il faut utiliser le type de guillemets que l'attribut font-family n'utilise pas :

<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,</p>
 'New York', serif;">...</p>

Essayez-le vous-même

Style de police

Attribut font-styleUtilisé le plus souvent pour régler le texte en italique.

Cette propriété comporte trois valeurs :

  • normal - Affichage du texte normal
  • italic - Affichage du texte en italique
  • oblique - Affichage du texte en oblique

Exemple

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

Essayez-le vous-même

La différence entre italic et oblique

L'attribut font-style est très simple : il est utilisé pour choisir entre le texte normal, italic et oblique. Ce qui est un peu complexe, c'est de bien distinguer la différence entre le texte italic et le texte oblique.

L'italic est un style de police simple, qui modifie légèrement la structure de chaque lettre pour refléter l'apparence de la variation. En revanche, le texte oblique est une version inclinée du texte vertical normal.

Dans la plupart des cas, les textes italic et oblique apparaissent complètement identiques dans les navigateurs web.

Déformation de police

Attribut font-variantIl est possible de définir des majuscules petites.

Les majuscules petites ne sont pas des majuscules classiques, ni des minuscules, et ces lettres utilisent des majuscules de tailles différentes.

Exemple

p {font-variant:small-caps;}

Essayez-le vous-même

Gras de la police

Attribut font-weightDéfinir la grasité du texte.

L'utilisation du mot-clé bold permet de définir le texte en gras.

Les mots-clés de 100 à 900 attribuent 9 niveaux de gras à la police. Si une police intégre ces niveaux de gras, ces nombres sont directement mappés aux niveaux prédéfinis, 100 correspondant à la forme de police la plus fine, 900 à la forme de police la plus épaisse. Le nombre 400 est équivalent à normal, et 700 à bold.

Si l'élément est mis en gras avec bolder, le navigateur fixe un gras plus épais que la valeur héritée. À l'inverse, le mot clé lighter fait que le navigateur diminue la grasité plutôt que de l'augmenter.

Exemple

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

Essayez-le vous-même

Taille de la police

Attribut font-sizeDéfinir la taille du texte.

La capacité à gérer la taille du texte est importante dans le domaine du design web. Mais, vous ne devriez pas ajuster la taille du texte pour que les paragraphes ressemblent à des titres, ou que les titres ressemblent à des paragraphes.

Toujours utiliser les titres HTML corrects, par exemple, utiliser <h1> - <h6> pour marquer les titres, utiliser <p> pour marquer les paragraphes.

La valeur de font-size peut être une valeur absolue ou relative.

Valeur absolue :

  • Définir la taille du texte à une taille spécifique
  • Ne pas permettre aux utilisateurs de modifier la taille du texte dans tous les navigateurs (c'est défavorable à l'accessibilité)
  • La taille absolue est très utile lorsque la taille physique de la sortie est déterminée

Taille relative :

  • Définir la taille en fonction des éléments environnants
  • Permettre aux utilisateurs de modifier la taille du texte dans le navigateur

Attention :Si vous n'avez pas spécifié la taille de la police, la taille par défaut du texte ordinaire (par exemple, les paragraphes) est de 16 pixels (16px = 1em).

Utiliser les pixels pour définir la taille du texte

En définissant la taille du texte en pixels, il est possible de contrôler entièrement la taille du texte :

Exemple

h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}

Essayez-le vous-même

Dans Firefox, Chrome et Safari, il est possible de réajuster la taille du texte des exemples ci-dessus, mais pas dans Internet Explorer.

Bien que la taille du texte puisse être ajustée avec l'outil de zoom du navigateur, cela ajuste en réalité toute la page, et non pas uniquement le texte.

Utiliser em pour définir la taille du texte

Pour éviter les problèmes de non-réglage du texte dans Internet Explorer, de nombreux développeurs utilisent l'unité em à la place des pixels.

W3C recommande l'utilisation de l'unité de dimension em.

1em équivaut à la taille de police actuelle. Si la taille de police d'un élément est de 16 pixels, alors pour cet élément, 1em équivaut à 16 pixels. Lorsque vous définissez la taille de la police, la valeur em change par rapport à la taille de police de l'élément parent.

La taille de texte par défaut dans les navigateurs est de 16 pixels. Par conséquent, la taille par défaut de 1em est de 16 pixels.

Vous pouvez utiliser la formule suivante pour convertir les pixels en em :pixels/16=em

(Remarque : 16 équivaut à la taille de police par défaut de l'élément parent, supposons que la taille de police de l'élément parent soit de 20px, alors l'équation doit être modifiée :pixels/20=em)

Exemple

h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;}  /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */

Essayez-le vous-même

Dans l'exemple ci-dessus, la taille du texte en em est la même que la taille du texte en pixels dans l'exemple précédent. Cependant, si vous utilisez l'unité em, vous pouvez ajuster la taille du texte dans tous les navigateurs.

Malheureusement, il y a toujours un problème dans IE. Lorsque vous redéfinissez la taille du texte, il peut être plus grand ou plus petit que la taille normale.

Utilisation combinée de pourcentage et d'em

La solution qui fonctionne dans tous les navigateurs consiste à définir la valeur par défaut de font-size en pourcentage pour l'élément body (élément parent) :

Exemple

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

Essayez-le vous-même

Notre code est très efficace. Il peut afficher la même taille de texte dans tous les navigateurs et permet à tous les navigateurs de redimensionner la taille du texte.

Exemple de police CSS :

Définir la police du texte
L'exemple suivant montre comment définir la police de texte.
Définir la taille de la police
L'exemple suivant montre comment définir la taille de la police.
Définir le style de la police
L'exemple suivant montre comment définir le style de la police.
Définir la variante de la police
L'exemple suivant montre comment définir la variante de la police.
Définir la gravité de la police
L'exemple suivant montre comment définir la gravité de la police.
Toutes les propriétés de police dans une seule déclaration
L'exemple suivant montre comment utiliser les propriétés abrégées pour définir les attributs de police dans une seule déclaration.

Attributs de police CSS

Propriété Description
font Propriétés abrégées. L'effet est de regrouper toutes les propriétés de police dans une seule déclaration.
font-family Définir la série de polices.
font-size Définir la taille de la police.
font-size-adjust Ajuster intelligemment la taille de la police de remplacement lorsque la police préférée n'est pas disponible. (Cette propriété a été supprimée dans CSS2.1.)
font-stretch Étendre horizontalement la police. (Cette propriété a été supprimée dans CSS2.1.)
font-style Définir le style de police.
font-variant Afficher le texte en petites majuscules ou en texte normal.
font-weight Régler l'épaisseur du texte.