Police CSS
Utilisez les propriétés de police CSS pour styliser le texte, définir sa taille, sa graisse et sa famille de polices. Apprenez à utiliser les styles de police CSS.
La typographie est l'une des premières choses qu'un lecteur remarque sur une page, et CSS vous offre un contrôle précis sur celle-ci. Les propriétés de police CSS définissent la police (famille de polices), la taille, la graisse (gras) et le style (comme l'italique) de votre texte.
Ce chapitre présente chaque propriété de police individuellement, montre un exemple exécutable pour chacune, puis explique la propriété raccourcie font qui vous permet de toutes les définir en une seule déclaration.
La propriété CSS font est un raccourci qui combine plusieurs propriétés de police. Nous allons ici expliquer les propriétés individuelles qui la composent :
Lors de l'ajout de texte ou de liens à une page web, nous les stylisons à l'aide de ces propriétés. Explorons-les en détail.
Famille de polices
Nous utilisons la propriété font-family pour spécifier la police du texte. Elle définit le nom de la police utilisée sur la page web.
Police CSS
p {
font-family: Arial, sans-serif;
}Comme vous pouvez le voir, nous avons appliqué la propriété font-family à notre balise <p>. On distingue deux types de familles :
- la famille générique — un groupe de familles de polices ayant un aspect similaire (comme « Serif » ou « Sans-serif »)
- la famille de polices — une famille de polices particulière (comme « Times New Roman » ou « Arial »)
Lorsque le nom d'une famille de polices comporte plus d'un mot, mettez-le entre guillemets (ex. : "Times New Roman"). Il est également recommandé de fournir une police de secours au cas où le navigateur ne prendrait pas en charge la première.
Style de police
Nous utilisons la propriété font-style principalement pour afficher le texte en italique.
Les valeurs les plus couramment utilisées pour la propriété font-style sont :
normal, qui affiche le texte normalement,italic, qui affiche le texte en italique,oblique, qui « penche » le texte.
Exemple de la propriété font-style :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p style="font-style:normal">This is paragraph with font-style property with normal value.</p>
<p style="font-style:italic">This is paragraph with font-style property with italic value.</p>
<p style="font-style:oblique">This is paragraph with font-style property with oblique value.</p>
</body>
</html>Par défaut, notre texte sera font-style: normal, même sans écrire cette valeur.
Taille de police
Nous utilisons la propriété font-size pour définir la taille du texte.
Les valeurs peuvent être spécifiées en pixels, points, em, rem, etc. Vous trouverez la liste complète dans la section font-size. Notez que 1em est égal à la taille de police calculée de l'élément parent (souvent 16px par défaut). Les pixels (px) sont l'unité la plus couramment utilisée.
Exemple de la propriété font-size :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h3 style="font-size:40px;"> Some heading with font-size property.</h3>
<p style="font-size:25px;"> Some paragraph with font-size property.</p>
<a style="font-size:2em;"> Some link with font-size property.</a>
</body>
</html>Vous devez également le tester par vous-même. Vous pouvez le faire avec notre éditeur HTML en ligne cliquez ici.
Variante de police
La propriété font-variant vous permet de définir le texte en normal ou en petites majuscules.
La valeur small-caps convertit les lettres minuscules en majuscules, mais les affiche à une taille plus petite que les lettres majuscules d'origine.
Exemple de la propriété font-variant :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.smallcaps {
font-variant: small-caps;
}
</style>
</head>
<body>
<h2>Font-variant property example</h2>
<p>Here we used a normal text as you can see.</p>
<p class="smallcaps">But We Used A Text With Small-Caps Here.</p>
</body>
</html>Graisse de police
Voyons maintenant comment rendre le texte ordinaire plus gras, puisque les titres sont gras par défaut.
Nous utilisons la propriété font-weight pour cela.
Les valeurs les plus couramment utilisées pour la propriété font-weight sont :
normalbold
Les valeurs peuvent également être spécifiées sous forme de nombres.
Exemple de la propriété font-weight :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p style="font-weight:900">Some paragraph with the font-weight property with value bold.</p>
<p style="font-weight:normal">Some paragraph with the font-weight property with value normal.</p>
<p style="font-weight:bold">Some paragraph with the font-weight property with value bold.</p>
</body>
</html>Comme mentionné, les valeurs numériques vont de 100 à 900. La valeur 400 correspond à normal, et 700 correspond à bold. Plus le nombre augmente de 100 à 900, plus la police est grasse.
Le raccourci font
Au lieu d'écrire chaque propriété sur sa propre ligne, vous pouvez toutes les définir en une seule fois avec le raccourci font. Cela permet de raccourcir votre feuille de style et de regrouper les déclarations liées.
L'ordre des valeurs est important. La syntaxe est la suivante :
font: font-style font-variant font-weight font-size/line-height font-family;Quelques règles à retenir :
font-sizeetfont-familysont obligatoires. Si l'un ou l'autre est absent, toute la déclaration est ignorée.font-style,font-variantetfont-weightsont optionnels et doivent venir avantfont-size.line-heightest optionnel et s'écrit aprèsfont-size, séparé par une barre oblique (/).- Toute valeur omise est réinitialisée à sa valeur par défaut, donc le raccourci est un moyen pratique d'effacer les déclarations détaillées précédentes.
Voici le même paragraphe stylisé avec les propriétés détaillées, puis avec le raccourci :
/* Longhand */
p {
font-style: italic;
font-weight: bold;
font-size: 18px;
line-height: 1.5;
font-family: Georgia, serif;
}
/* Equivalent shorthand */
p {
font: italic bold 18px/1.5 Georgia, serif;
}Pour plus de détails et d'exemples, consultez le chapitre font.