Police de caractère
Comment mettre en forme les polices de caractères ?
En parcourant les exemples des tutoriels précédents, vous avez dû vous apercevoir que l'on a souvent utilisé des propriétés telles que font-size, font-family, color etc. Pour autant, on n'a pas encore expliqué ce que cela signifie exactement. Dans les chapitres qui suivent, on essaiera de voir tout cela plus en détail.
Commençons d'abord par tout ce qui concerne la typographie : les fonts, ou polices de caractères. La mise en forme nous permet d'avoir des polices de caractère personnalisées à notre goût.
Choix de la police
Le pouvoir de l'informatique nous permet d'avoir une multitude de polices de caractères qui ont chacune leur forme. Parmi les standards on distingue par exemple les times new roman, arial, etc Dans ce cas, il ne vous reste plus qu'à choisir les polices selon votre préférence. Ensuite, vous spécifierez votre choix dans la feuille de style en utilisant la propriété font-familly comme suit :
Code CSS :
p
{
font-family: "Agency FB"; /* font fantaisiste ;) */
}
Cependant, il ne faut surtout pas oublier que vos pages web seront visitées. La police ne s'affichera pas forcément telle que vous souhaiteriez la voir apparaître sur l'écran de l'internaute. En effet, Il se peut que la police que vous avez spécifiée n'existe pas sur le système du visiteur. Vous avez donc la possibilité de lui proposer d'autres choix alternatifs.
Code CSS :
p
{
font-family: "Agency FB", Calibri, "Californian FB", serif
}
Le navigateur essaiera d'abord de mettre la police en Agency FP. Si ne le visiteur ne l'a pas, il essaiera de mettre la Calibri et ainsi de suite. Il faut séparer par une virgule la liste des polices. Si le nom de la police contient un espace, il faut le mettre entre guillemets comme "Californian FB".
En principe, on a intérêt à mettre en tout dernier une police standard. C'est-à-dire une police dont on est certain qu'elle existe partout. Comme ça on est sûr que l'affichage sera toujours correct, au moins dans cette police. Il ne faut néanmoins pas oublier de tester l'affichage dans cette police également. Il y a deux familles distinctes
- famille classique : arial, times new roman, etc.
- famille générique : serif, sans-serif,etc.
La plupart du temps, on met les polices de la famille générique au moins en dernier, particulièrement les serifs.
Style de la police
Comme son nom l'indique, la propriété font-style permet de définir le style de la police. Grâce à cette propriété, on peut avoir des polices en italique ou normale.
Code CSS :
.normale {
font-style:normal
}
.italique {
font-style:italic
}
Code XHTML :
<p class="normale">Police normale</p> <p class="italique">Police italique</p>
Mettre en gras en CSS
La mise en gras en CSS permet de mettre du poids sur les polices. D'où le nom de la propriété CSS font-weight .Cette propriété définit l'épaisseur de la police. On l'utilise souvent dans les titres, dans les paragraphes, etc Elle peut prendre la valeur bold pour gras ou normal pour le normal (pas gras)
Code CSS :
.normale
{
font-weight:normal
}
.bold
{
font-weight:bold
}
Code XHTML :
<p class="normale">pas gras </p> <p class="bold">Police gras </p>
Il est possible également de définir un poids avec un attribut numérique : 100, 200... 900. 400 correspond alors à 'normal', alors que '700' correspond au 'gras' traditionnel. L'échelle va de 100 en 100.
