Police CSS

Dans ce chapitre, nous allons parler des polices.

Nous allons expliquer les propriétés suivantes:

Lorsqu'on écrit quelques informations, texte ou lien sur notre page web, on doit leur donner des styles. On utilise les propriétés mentionnées ci-dessus pour styler des textes. Apprenons plus sur ces propriétés.

Famille de Polices

Pour la famille de polices du texte, on utilise la propriété font-family. Cela est le nom de la propriété, qu'on souhaite utiliser sur notre page web.

Voyons un exemple:

p {
  font-family: Arial, sans-serif;
}

Comme vous le voyez, nous avons donné la propriété font-family à notre balise <p>. On distingue deux types de famille:

famille générique - un groupe de familles de polices avec une apparence similaire (comme "Serif" ou "Sans-serif")
famille de polices - une famille de polices spécifiques (comme "Times New Roman" ou "Arial")

Lorsqu'on utilise des familles de polices spécifiques, qui se compose de plusieurs mots, on met le nom en guillemets (comme "Times New Roman"). Au même temps, on doit écrire plus qu'une famille de polices, car au cas où le navigateur ne supporte pas votre première famille de police, vous pouvez avoir quelques d'autres familles de polices.

Style de Polices

On utilise la propriété font-style surtout pour les textes qu'on souhaite écrire en italic.

Le plus souvent on utilise les valeurs suivantes pour la propriété font-style:

normal
italic
oblique

Voyons le code et son apparence sur les navigateurs.

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <p style="font-style:normal">C'est un paragraphe avec la propriété  font-style avec la valeur normal.</p>
    <p style="font-style:italic">C'est un paragraphe avec la propriété  font-style avec la valeur italic.</p>
    <p style="font-style:oblique">C'est un paragraphe avec la propriété  font-style avec la valeur oblique.</p>
  </body>
</html>

Essayez-vous-même!

Par défaut, notre texte sera font-style: normal, même sans écrire cette valeur.

Taille de Polices

Pour la taille de notre texte, on utilise la propriété font-size.

On doit donner des valeurs à notre propriété. Ces valeurs sont données par pixels ou em. Vous devez savoir que 1em=16px. Le plus souvent on utilise des pixels (px).

Voyons quelques exemples.

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <h3 style="font-size:40px;"> Un titre avec la propriété font-size.</h3>
    <p style="font-size:25px;"> Un paragraphe avec la propriété font-size.</p>
    <a style="font-size:2em;"> Un lien avec la propriété font-size.</a>
  </body>
</html>

Essayez-vous-même!

Vous devez vérifier cela vous-même. Vous pouvez le faire avec notre éditeur html en ligne cliquez ici.

Hauteur de Ligne

On utilise la propriété line-height pour l'espace entre les lignes. On donne une valeur à la propriété line-height en utilisant une valeur pixel.

Voyons un exemple.

Cette fois on va écrire un plus grand texte afin de comprendre la signification de line-height.

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <p style="line-height:10px">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. .
    </p>
    <p style="line-height:20px">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. 
    </p>
  </body>
</html>

Essayez-vous-même!

Largeur de Police

Maintenant vous savez que lorsqu'on a quelque texte et on veut le rendre italic, on utilise font-style.

Maintenant apprenons ce qu'on peut faire pour rendre le texte plus gras au cas où cela n'est pas un titre, car par défaut les titres sont en gras.

Pour cela, on utilise la propriété font-weight.

On utilise surtout les valeurs suivantes de la propriété font-weight:

normal
bold

La valeur peut également être donnée par nombres.

Voyons un exemple.

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <p style="font-weight:900">Quelque paragraphe avec la propriété font-weight avec la valeur bold.</p>
    <p style="font-weight:normal">Quelque paragraphe avec la propriété font-weight avec la valeur normal.</p>
    <p style="font-weight:bold">Quelque paragraphe avec la propriété font-weight avec la valeur bold.</p>
  </body>
</html>

Essayez-vous-même!

Comme vous vous souvenez, nous avons dit que nous pouvons donner une valeur avec les nombres 100-900. La valeur 100 est la valeur "normal" et 900 est "bolder". Autant que le nombre augmente entre 100 et 900, la police devient plus en gras.