Taille de la police
Taille de la police avec différentes valeurs en CSS
En CSS, on a différentes façons de définir la valeur de la taille d'une propriété. Pour définir la taille de la police on utilise la propriété font-size.
Il y a deux façons de spécifier les valeurs de la taille de la police. On peut donner une valeur soit en la spécifiant par des mots clés, soit en indiquant sa valeur numérique à l'aide des unités de mesure que l'on a vues tout à l'heure.
Spécifier la taille par des mots clé
On peut donner une valeur relative de la taille par rapport à celle de l'élément parent. Les mots-clés utilisés sont :
- smaller
- medium
- larger
Sachant que sur Internet Explorer, la police par défaut est medium. Lorsque l'on spécifie ainsi la taille, la valeur de base est alors le navigateur de l'internaute.
Code XHTML :
<div> <span style="font-size:smaller ;">Police small </span><br> <span style="font-size: medium ;">Police medium</span><br> <span style="font-size: larger ;"> Police large</span><br> </div>
On peut spécifier de façon absolue la taille de la police tout en utilisant toujours des mots clés comme précédemment. Sauf que donner la valeur absolue consiste à juste dire si c'est petit, moyen ou grand sans spécifier la taille exacte et sans donner une référence. Les mots clés possibles par ordre croissant de la valeur sont :
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
Code CSS :
<div> <span style="font-size: xx-small;">Police xx-small </span><br> <span style="font-size: x-small;">Police x-small</span><br> <span style="font-size: small;"> Police small</span><br> <span style="font-size: medium;"> Police medium</span><br> <span style="font-size: large;"> Police large</span><br> <span style="font-size: x-large;"> Police x-large</span><br> <span style="font-size: xx-large;"> Police xx-large</span><br> </div>
En termes de taille, les polices fonctionnent comme les tee-shirts. Il y en a pour toutes les tailles, il y a juste à employer le mot clé convenable et vous trouvez facilement ce dont vous avez besoin.
Spécifier la taille de la police grâce aux valeurs numériques
La taille de la police peut aussi être indiquée en pourcentages par rapport à celle de l'élément parent. La taille de l'élément parent sera servira donc de référence pour le calcul de la valeur de la taille de l'élément. Pour cela, on indique la valeur numérique et après on met le signe % tout simplement.
Code CSS:
p.taille150{font-size: 150%}
p.taille130 {font-size: 130%}
p.taille100{font-size: 100%}
Code XHTML :
<p class="taille150">taille 15O pourcent</p> <p class="taille130">taille 130 pourcent</p> <p class="taille100">taille 100 pourcent</p> <p>Taille normal</p>
On peut aussi spécifier la taille de police de façon absolue mais en utilisant des valeurs numériques exactes. Autrement dit, la taille spécifiée est indépendante de la table des tailles de police du visiteur.
Code CSS :
p.taille12pt{font-size: 12pt;}
p.taille50px {font-size: 50px;}
p.taille2mm{font-size: 2mm;}
Code XHTML :
<p class="taille12pt">taille 12 point</p> <p class="taille50px">taille 50 pixel</p> <p class="taille2mm">taille 4mm </p>
La syntaxe de définition est la même que celle la précédente sauf qu'à la place du signe % on met l'unité de mesure. Il suffit donc de donner la valeur numérique, suivie de l'unité de mesure em, ex, px, in, cm, mm, pc, pt (voir le cours sur l'unité de mesure).
En revanche, il ne faut pas mettre de valeurs négatives. Ne pas mettre non plus d'espace entre la valeur et l'unité (16 px ne marche pas toujours)
