Feuilles de style CSS (Cascading Style Sheets)

Auteur: Mohamed CHINY Durée necessaire pour le cours de Feuilles de style CSS (Cascading Style Sheets) Niveau recommandé pour le cours de Feuilles de style CSS (Cascading Style Sheets) Supports vidéo disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz disponible pour ce cours

Page 4: Les polices

Toutes les pages

Propriétés de la famille font

Les propriétés CSS qui agissent sur la police commencent par font. Ils servent à mettre en forme le contenu texte d'un document.

Propriété font-size

La propriété font-size permet de spécifier la taille de la police. Si cette propriété n'est pas spécifiée alors la taille de la police vaut par défaut 12 points (qui correspond à l'indexe 3 en HTML).

La taille de la police peut être absolue ou relative est peut s'exprimer de plusieurs manières:
  • L'unité px: Il s'agit d'une taille absolue. px désigne pixel. La taille de la police désigne la hauteur des caractères en pixel.
  • L'unité pt: Là encore c'est une taille absolue. pt désigne point. C'est une unité connue en typographie. 1 point mesure 1/72 pouces.
  • Les unité conventionnelles: Là encore ce sont des tailles absolues très connues, je parles de cm, mm, in (pour inch ou pouce)...
  • L'unité em: em est une unité relative. 1em désigne la taille normale. Si vous voulez agrandir la taille alors il faut déclarer une valeur supérieure à 1 (par exemple 1.2em) et inversement.
  • L'unité %: Le pourcentage est également une taille relative. 100% désigne la taille normale et 80% une taille plus petite.


Exemple:
h1{
   font-size:36pt;
}
Ce style appliquera la taille 36pt aux titres <h1>. Par conséquent il auront l'air plus grand car ils mesurent 24pt normalement.

Propriété font-style

La propriété font-style permet d'écrire un texte en italique. Par défaut elle vaut la valeur normal qui n'a aucun effet sur le texte. La valeur italic incline le texte.
Exemple:
span{
   font-style:italic;
}

Propriété font-variant

La propriété font-variant permet de convertir le texte en petites majuscules. Par défaut elle vaut la valeur normal. Si la valeur small-caps est déclarée alors la police sera transformé.
Exemple:
h1{
   font-variant:small-caps;
}
Ce qui donne:

Titre h1 converti en petites majuscules.

Les petites majuscules ont la forme des lettres majuscules et la taille des minuscules.

Propriété font-weight

La propriété font-weight désigne la graisse de la police. Elle peut prendre plusieurs valeurs (vue que la graisse a des niveaux) mais en pratique y'en a que deux qui sont souvent utilisée à savoir bold qui met le texte en gras (comme le fait la balise <b>) et normal qui désactive le gras si le texte l'était déjà (cas des balises <h1>, <h2>... par exemple).

Exemple:
h1{
   font-weight:normal;
}
Ce qui donne:

Titre h1 sans graisse.

Propriété font-family

La propriété font-family désigne la police d'écriture du texte. Elle accepte comme valeur le nom de la police.

Exemple:
body{
   font-family:verdana;
}
Ce qui signifie que tous les textes inclus dans la balise <body> seront écrits en police verdana. Si le nom de la police contient des espaces alors il faut la déclarer entre des guillemets.

Exemple:
body{
   font-family:"Century Gothic";
}
Bien entendu, la condition pour que la police s’exécute correctement est qu'elle soit disponible sur le système du client. Mais imaginons un instant que la police choisie n'est pas disponible. Dans ce cas, le navigateur chargera la police par défaut qui est "Times New Roman" et qui n'est pas du tout adaptée aux sites Web. La solution consiste donc à déclarer une liste de polices et laisser le navigateur la parcourir jusqu'à ce qu'il rencontre une police disponible.

Exemple:
body{
   font-family:"Century Gothic", verdana, sans-serif;
}
Dans ce cas, le navigateur cherchera la police "Century Gothic", si elle est disponible il la chargera sinon il passera à "Verdana" etc...
N'oubliez pas de séparer les noms de la police par une virgule (,).
Vous avez sans doute aperçu "sans-serif". En effet, il ne s'agit pas d'une police normale mais une famille générique qui regroupe plusieurs polices. Donc, au lieux de lister beaucoup de polices, on déclare la première, la deuxième, et pourquoi pas la troisième, mais après on déclare la famille générique et laisser le navigateur sélectionner la première police disponible et appartenant à cette famille si les trois premières ne sont pas trouvables.

Les polices génériques

Comme nous avons vu dans le dernier exemple, sans-serif représente une police générique (ou famille générique) regroupant plusieurs polices qui ont des caractéristiques communes.

Il existe plusieurs familles génériques mais sur le Web nous n'avons recours qu'à trois d'entre elles:
  • Famille de police avec empattement (Sérif): Ce sont des polices qui affichent les caractères avec des terminaisons qui dépassent du caractères. C'est comme des pattes sur lesquels le caractère repose. C'est le cas de "Times New Roman" par exemple. Le nom CSS de cette famille est serif (sans accent).
  • Famille de police sans empattement (Sans Sérif): Ce sont des polices qui n'affichent pas les terminaisons comme les Sérif. On les appelle aussi des polices à bâtons. Il sont les plus adaptés aux pages Web. Exemple: "verdana" ou "arial". Le nom CSS de cette famille est sans-serif.
  • Famille de police à chasse fixe (Monospace): Ce sont des polices qui s'étendent sur la même largeur quelque soit le caractère. C'est une police adaptée pour afficher du code source sur une page Web par exemple. Les polices "Courier" et "Courier New" sont les plus connues de cette famille. Le nom CSS correspondant est monospace.


Exemple:
<h1 style="font-weight:normal; font-family:serif">MIME</h1>
<h1 style="font-weight:normal; font-family:sans-serif">MIME</h1>
<h1 style="font-weight:normal; font-family:monospace">MIME</h1>
Ce qui donne:

Code source

Code source

Code source

Les polices embarquées

On les appelles polices embarquées ou polices en ligne. Il s'agit d'une police qui est envoyée au client par le serveur pour s'en servir durant l’exécution d'une page Web. En effet, le navigateur repose sur les polices installées sur le système, mais cette pratique limite l'utilisation des polices spéciales qui, souvent, ne sont pas disponibles chez la plupart des clients. La solution est donc d'envoyer la police désirée au client pour s'en servir. C'est possible en CSS grâce à la règle @font-face.

Il existe de nombreuses règles en CSS nommées règles-at (pour règle @). Ils commencent par le caractère arobas @. L'une de ces règles-at est @font-face qui permet de spécifier une police spéciale à envoyer au navigateur pour qu'il affiche le texte tel que l'on souhaite.

La syntaxe ressemble à ceci:
@font-face{
   font-family:Nom_de_la_police;
   src:url("Chemin_de_la_police_sur_le_serveur");
}
  • Nom_de_la_police: désigne le nom que l'on veut attribuer à la police. Ce nom sera utilisé plus tard dans les propriétés font-family.
  • Chemin_de_la_police_sur_le_serveur: désigne, comme son nom l'indique, le chemin (absolu ou relatif) de la police (qui est disponible sur le serveur).

Exemple:
@font-face{
   font-family:htower;
   src:url("fonts/htower.ttf");
}
h1{
   font-weight:normal;
   font-family:htower;
}
Ce qui donne:

Police embarquée

Vous avez remarqué l’extension de la police? Il s'agit de TTF c'est le format le plus populaire, mais elle n'est pas supporté par tous les navigateur. La solution consiste donc à convertir la police en plusieurs formats pris en charge par les navigateurs et qui sont: TTF, WOFF et SVG, sans oublier le format EOT connu par Internet Explorer.

Si on considérait que la police "htower" de l'exemple précédent a été convertie à toutes ces formats, la règle @font-face ressemblerait à ceci:
@font-face{
   font-family:"htower";
   src:url("htower.eot");
   src:url('htower.woff") format("woff"),
       url("htower.svg") format("svg"),
       url("htower.ttf") format("truetype");
}
Comme Internet Explorer fait toujours l'exception, on a séparé sa déclaration src avec le format EOT. Les trois autres déclarations sont séparées par la virgule. De cette manière le navigateur parcourra la liste jusqu'à ce qu'il trouve le format convenable.
La déclaration format est facultative. Elle indique au navigateur le format de la police. Cependant, l'extension suffit pour en informer.

Les polices en vidéo



Quiz (Pour tester vos connaissances)
  1. Que fait le code suivant?
    nav{
       background-color:#CCCCCC;
       font-variant:small-caps;
    }
Colore l'arrière plan des balises NAV en gris foncé et converti leur texte en majuscule
Colore le texte des balises NAV en gris clair et le converti en petites majuscules
Colore l'arrière plan des balises NAV en gris foncé et converti leur texte en petites majuscules
Colore l'arrière plan des balises NAV en gris clair et converti leur texte en petites majuscules
  1. Si on déclare le style suivant
    div{
       background-color:rgba(100,100,100,0.5);
       color:rgb(100,100,100);
    }
Le texte inclus dans la balise <div> sera visible
Le texte inclus dans la balise <div> ne sera pas sera visible
  1. Pour déclarer une police composée (dont le nom contient des espaces blancs) comme valeur de la propriété font-family
Il faut reprendre son nom en suppirmant les espaces blancs
Il faut mettre son nom entre des crochets
Il faut mettre son nom entre des guillemets
Il ne faut pas la déclarer du tout car les noms composés ne sont pas autorisés en CSS
  1. Le style suivant
    font-size:18pt;
    font-weight:bold;
    donne un résultat similaire à celui appliqué par défaut par:
La balise <h1>
La balise <h2>
La balise <h3>
La balise <h4>
  1. Que fait le code suivant?
    h1{
       font-family:"Century Gothic", sans-serif;
    }
Applique la police du nom de 'Century' aux titres H1 si elle est disponible, sinon elle applique la police du nom de 'Gothic', sinon 'sans-serif'
Applique la police du nom de 'Century Gothic' aux titres H1 si elle est disponible, sinon elle applique la police du nom de 'sans-serif'
Applique la police du nom de 'Century Gothic' aux titres H1 si elle est disponible, sinon elle applique la première police rencontrée de la famille générique 'sans-serif'
Applique la police du nom de 'Century Gothic' au premier titre H1 et 'sans-serif' au deuxième.