Police CSS
Dans ce chapitre, nous allons parler des polices.
Les propriétés CSS de police sont utilisées pour définir la taille, la famille de police, le gras et le style du texte.
La propriété CSS font est une propriété raccourcie qui combine plusieurs propriétés de police. Nous allons ici expliquer les propriétés individuelles qui la composent :
Lorsque nous ajoutons du texte ou des liens à une page web, nous les stylisons à l’aide de ces propriétés. Explorons-les en détail.
Font Family
Nous utilisons la propriété font-family pour spécifier la police du texte. Cela définit le nom de la police utilisée sur la page web.
CSS Font
p {
font-family: Arial, sans-serif;
}Comme vous pouvez le voir, nous avons appliqué la propriété font-family à notre balise <p>. Nous distinguons deux types de familles :
- famille générique - un groupe de familles de polices ayant un aspect similaire (comme "Serif" ou "Sans-serif")
- famille de polices - une famille de polices particulière (comme "Times New Roman" ou "Arial")
Lorsqu’un nom de famille de police comporte plus d’un mot, mettez-le entre guillemets (par exemple, "Times New Roman"). Il est également recommandé de fournir une famille de police de secours au cas où le navigateur ne prendrait pas en charge la première.
Font Style
Nous utilisons principalement la propriété font-style 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 “incline” le texte.
Exemple de la propriété font-style :
Exemple avec la propriété CSS font-style|CSS Font|W3Docs
<!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.
Font Size
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 pouvez trouver 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 :
Exemple avec la propriété CSS font-size|CSS Font|W3Docs
<!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 aussi le vérifier par vous-même. Vous pouvez le faire avec notre éditeur HTML en ligne cliquez ici.
Font Variant
La propriété font-variant vous permet de définir le texte en normal ou en petites capitales.
La valeur small-caps convertit les lettres minuscules en majuscules, mais les affiche dans une taille plus petite que les lettres majuscules d’origine.
Exemple de la propriété font-variant :
Exemple avec la propriété CSS font-variant|CSS Font|W3Docs
<!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>Font Weight
Apprenons maintenant à rendre le texte normal plus gras, puisque les titres sont gras par défaut.
Nous utilisons pour cela la propriété font-weight.
Les valeurs les plus couramment utilisées pour la propriété font-weight sont :
normalbold
Les valeurs peuvent aussi être spécifiées sous forme de nombres.
Exemple de la propriété font-weight :
Exemple avec la propriété CSS font-weight|CSS Font|W3Docs
<!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. À mesure que le nombre augmente de 100 à 900, la police devient plus grasse.
Practice
Which of the following statements are true regarding CSS fonts?