font - Cours

font-family

font-family permet de spécifier la famille de police pour le texte. Comme une police donnée n'est pas nécessairement présente sur le poste de l'utilisateur, on précise en général plusieurs choix.

p{ font-family: Helvetica, Verdana, sans-serif; }

La règle précédente signifie que la police utilisée pour les paragraphes doit être Helvetica. Si cette police est absente du poste utilisateur, ce sera la police Verdana. Si cette dernière est également absente, ce sera la police de type sans-serif par défaut du système.

On distingue les familles suivantes :

serif (police avec empattements)
sans-serif (sans empattements)
monospace (police à chasse fixe, souvent utilisée pour afficher du code)
cursive
fantasy

Certains noms de police comportent des espaces, il faut alors utiliser des guillemets : body{ font-family: "Times New Roman", Times, serif;}

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> family  </title>
        <style>
            code{ font-family: monospace; }
        </style>
    </head>
    <body>
        La famille monospace est en général utilisée lorsqu'on veut donner un morceau de code de langage informatique :
        <code> font-family: monospace; </code> 
    </body>
</html>

font-size

Cette propriété donne la taille de police. Elle est en général exprimée dans les unités suivantes :

Unité absolue : px (pixels)
Unité relative : em. Taille relative à celle utilisée pour l'élément parent. La taille 1em correspond à celle du parent. Si par exemple, la taille pour l'élément parent est 20px et que l'on utilise la taille 0.5em pour un élément enfant, cet élément enfant aura une taille de police de 10px.
On peut de façon analogue utiliser le pourcentage (dans l'exemple donné : déclarer une taille de 50% ou de 0.5em a le même effet).
Unité relative : rem. Taille relative à celle utilisée pour l'élément racine (élément html).

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> size  </title>
        <style>
            body{ font-size: 20px; }
            section{font-size: 0.8em;}
            div{font-size: 50%;}
        </style>
    </head>
    <body>
        Taille de 20 px.
        <section>
            Taille de 0.8em du parent (body), soit taille de 16 px.
            <div id="div1"> 
                Taille de 50% de son parent (section), soit 8px.
                <div> 
                    Taille de 50% de son parent, 
                    c'est à dire du div d'id "div1", soit une taille de 4px.
                </div>
            </div> 
        </section>
       
    </body>
</html>

font-weight

On utilise en général cette propriété avec la valeur bold.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> color  </title>
        <style>
            p.a{ font-weight: bold; }
        </style>
    </head>
    <body>
        <p class="a"> bla bla bla </p>
        <p> blu blu blu </p>
       
    </body>
</html>

font-style

Les valeurs de cette propriété : normal, italic, oblique, inherit.

inherit est la valeur par défaut (cette valeur signifie que le style est hérité du style de l'élément parent).

italic et oblique sont en général traduits de la même façon dans les navigateurs.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> style </title>
        <style>
           p.a{font-style:italic;}
           p.b{font-style:oblique;}
           p.c{font-style:normal;}           
        </style>
    </head>
    <body>
            <p class="a"> bla bla bla </p>
            <p class="b"> blu blu blu </p>
            <p class="c"> bli bli bli </p>
    </body>
</html>

font-variant

On utilise en général cette propriété avec la valeur small-caps (petites majuscules).

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>variant  </title>
        <style>
            p.a{font-variant : small-caps;}
        </style>
    </head>
    <body>
         <p> bla bla bla </p>
         <p class="a"> blu blu blu </p>
    </body>
</html>

line-height

line-height permet de définir la hauteur totale d'une ligne, en comprenant l'espace au-dessus et l'espace en-dessous des lettres. Augmenter la valeur de line-height permet donc d'augmenter les inter-lignes.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>line-height  </title>
        <style>
            body{font-size : 12px;}
            p{width : 100px;}
            p.a{line-height: 15px;}
            p.b{line-height: 20px;}
        </style>
    </head>
    <body>
        <p class="a"> Un premier paragraphe avec des hauteurs de ligne fixées en pixels. </p>
        <p class="b"> Un second paragraphe avec des hauteurs de ligne fixées en pixels également mais fixées à une valeur plus grande. </p>
        
    </body>
</html>

Il est naturel de définir une hauteur de ligne en fonction de la taille de la police de caractères utilisée. Pour cela, il suffit de ne pas préciser d'unité lors de la déclaration concernant line-height.

Par exemple : line-height: 1.5; définira une ligne de hauteur 1,5 fois la taille de police.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>line-height  </title>
        <style>
            body{font-size : 12px;}
            p{width : 100px;}
            p.a{line-height: 1;}
            p.b{line-height: 1.2;}
            p.c{line-height: 1.6;}
            p.d{font-size:20px;line-height: 1.6;}
        </style>
    </head>
    <body>
        <p class="a"> Un premier paragraphe avec des hauteurs de ligne 1. </p>
        <p class="b"> Un second paragraphe avec des hauteurs de ligne 1.2. </p>
        <p class="c"> Un troisième paragraphe avec des hauteurs de ligne 1.6. </p>
        <p class="d"> Un quatrième paragraphe avec des hauteurs de ligne 1.6 (police plus grande). </p>
    </body>
</html>