Feuilles de style CSS (Cascading Style Sheets)
Page 4: Les polices
Toutes les pages 
Feuilles de style CSS (Cascading Style Sheets)
Page 4
Les polices
Les polices
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.
font-size:36pt;
}
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;
}
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:
font-variant:small-caps;
}
Titre h1 converti en petites majuscules.
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:
font-weight:normal;
}
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.
font-family:verdana;
}
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.
font-family:"Century Gothic";
}
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...
font-family:"Century Gothic", verdana, sans-serif;
}
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:
<h1 style="font-weight:normal; font-family:sans-serif">MIME</h1>
<h1 style="font-weight:normal; font-family:monospace">MIME</h1>
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");
}
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:
font-family:htower;
src:url("fonts/htower.ttf");
}
h1{
font-weight:normal;
font-family:htower;
}
Police embarquée
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.
font-family:"htower";
src:url("htower.eot");
src:url('htower.woff") format("woff"),
url("htower.svg") format("svg"),
url("htower.ttf") format("truetype");
}
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
Page 4
Les polices
Les polices
Quiz 
