Dans cette lecon, vous apprendrez ce que sont les polices et comment les appliquer avec CSS. Nous etudieron egalement comment contourner le probleme des polices specifiques choisies pour un site Web qui ne sont visibles que si elles sont installees sur l'ordinateur utilise pour acceder au site Web. Les proprietes CSS suivantes seront decrites :
La propriete font-family sert a indiquer la liste prioritaire des polices a utiliser pour l'affichage d'un element donne
ou d'une page Web. Si la premiere police de la liste n'est pas disponible sur l'ordinateur utilise pour acceder au site,
la police suivante est essayee et ainsi de suite jusqu'a ce qu'il y en ait une qui convienne.
Il y a deux types de noms pour categoriser les polices : les noms de familles et les familles generiques. Les deux termes sont expliques ci-dessous.
On peut illustrer cette difference comme ceci :
Lorsqu'on liste des polices pour un site Web, on commence naturellement par la police preferee suivie par des polices de remplacement. Il est recommande de terminer la liste par une famille generique. Ainsi, la page s'affichera au moins avec une police de la meme famille si aucune des polices indiquees n'etait disponible.
Un exemple de liste prioritaire de polices ressemblerait a ceci :
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}
Les titres marques par des elements <h1> s'afficheront dans la police "Arial". Si elle n'est pas installee
dans l'ordinateur de l'utilisateur, la police "Verdana" sera utilisee a la place. Si ces deux polices sont indisponibles,
les titres s'afficheront dans une police de la famille sans-serif.
Remarquez que le nom de la police "Times New Roman" contient des espaces, et elle est donc listee entre des guillemets.
La propriete font-style definit le style de la police concernee etre normal,
italic ou oblique. Dans l'exemple a suivre, tous les titres balises par des
elements <h2> s'afficheront en italiques.
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif; font-style: italic;}
La propriete font-variant sert a choisir entre les variantes normal ou small-caps
(N.d.T. petites capitales) d'une police. Une police small-caps utilise des lettres en capitales de taille reduite
a la place des lettres en minuscules. Embrouille ? etudiez ces exemples :
Si la propriete font-variant vaut small-caps et qu'aucune police en petites capitales n'est disponible,
le navigateur affichera tres probablement le texte en capitales a la place.
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}
La propriete font-weight decrit avec quel degre de graisse (ou de noir ) presenter la police. Elle peut avoir
une graisse normal ou bold (N.d.T. caracteres gras). Certains navigateurs permettent meme
d'utiliser des nombres entre 100 et 900 (les centaines) pour decrire la graisse de la police.
p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;}
Le corps d'une police se regle par la propriete font-size.
On peut choisir parmi beaucoup d'unites differentes (par exemple, pixels et pourcentages) pour decrire les corps des polices. Dans ce tutoriel, nous nous concentrerons sur les unites les plus courantes et appropriees. Les exemples comprennent :
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
Il existe une difference essentielle entre les quatre unites precedentes. Les unites px et pt font que le corps de la police est absolu, tandis que % et em permettent a l'utilisateur de l'ajuster si necessaire. Beaucoup d'utilisateurs ont des handicaps, sont agees ou simplement patissent d'une mauvaise vue ou de la pietre qualite de leur moniteur. Pour rendre votre site Web accessible a tous, vous devriez utiliser des unites ajustables telles que % ou em .
Voici une illustration de la facon d'ajuster la taille du texte dans Mozilla Firefox et dans Internet Explorer. Essayez vous-meme (super, n'est-ce pas ?)
Avec la propriete raccourcie font, il est possible de couvrir toutes les differentes proprietes de police en un coup.
Par exemple, prenons ces quatre lignes de code servant a decrire les proprietes de police de <p> :
p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
Avec la propriete raccourcie, on peut simplifier le code :
p {
font: italic bold 30px arial, sans-serif;
}
L'ordre des valeurs de la propriete font est le suivant :
font-style | font-variant | font-weight | font-size | font-family
Vous venez d'apprendre quelques unes des possibilites liees aux polices. Rappelez-vous que l'un des avantages majeurs de CSS pour definir les polices est que vous pouvez, a tout moment, changer les polices d'un site Web entier. CSS fait gagner du temps et facilite la vie. Dans la lecon suivante, nous verrons le texte.