font-size

Hérité : oui   -   Compatibilité : FF, Mozilla, Opera, Safari IE 4,5,6,7 - CSS 1

Définit la taille de caractères de l'élément.

Plusieurs méthodes sont disponibles.

  • Un ensemble de constantes (xx-small, x-small, small, medium, large, x-large, xx-large) permet de définir des tailles dites absolues. En réalité, ces tailles ne sont absolues que pour un navigateur et un système d'exploitation donnés, car leur point de référence varie en fonction de ces derniers (analogue aux anciennes tailles de police HTML de 1 à 7). Elles garantissent toutefois qu'un élément auquel est appliqué la propriété large sera affiché en caractères plus grands qu'un élément auquel est appliqué la propriété medium.
  •  Un autre ensemble de constantes (larger, smaller) permet de définir des tailles dites relatives. Du fait que la propriété font-size est hérité de l'élément parent, ces tailles relatives sont appliquées à l'élément parent pour déterminer la taille de caractères de l'élément actuel. C'est au navigateur de déterminer exactement de combien la taille de police doit être agrandie ou réduite, et cela dépend en grande partie de la façon dont la taille de police de l'élément parent a été définie. Si elle a été définie à l'aide d'une propriété de taille absolue (large, par exemple) et que vous appliquez à l'élément enfant la propriété larger, les caractères sont affichés dans la taille x-large du navigateur. Les incréments ne sont pas aussi nets lorsque la taille de caractères de l'élément parent est définie sous forme de longueur ou de pourcentage.
  • Si vous spécifiez une longueur pour la propriété font-size, choisissez l'unité qui convient le mieux pour les polices affichées sur le périphérique de sortie, par exemple les pixels (px) pour l'affichage écran et les points (pt) ou les cadratins (em) pour la sortie imprimée. Les valeurs de cadratin sont calculées en fonction de la taille de police de l'élément parent.
  • Vous pouvez également définir la propriété font-size sous forme de pourcentage, lequel sera calculé par rapport à la taille de caractères de l'élément parent.

Certains navigateurs gênent les efforts que vous"pouvez déployer pour définir la taille précise des polices, puisqu'ils utilisent leurs propres paramètres (ou ceux de l'utilisateur) pour définir une taille moyenne (« medium »). C'est pourquoi beaucoup de concepteurs choisissent souvent les constantes de taille relative pour leurs spécifications font-size. Ce choix signifie que le concepteur renonce à un certain niveau de contrôle sur l'affichage pour les divers navigateurs et systèmes d'exploitation, mais les tentatives visant à établir un contrôle trop strict pour un affichage uniforme se soldent bien souvent par une intense frustration.

Syntaxe CSS
font-size: TailleAbsolue | TailleRelative | longueur | pourcentage
Valeur(s) possible(s) pour cette propriété :
  • Pour une taille de caractères absolue, l'une des constantes suivantes: xx-small | x-small | small | medium | large | x-large | xx-large.
  • Pour une taille relative, l'une des constantes suivantes: larger | smaller.
  • Pour un pourcentage, la valeur pourcentage suivie du signe %.
Valeur initiale

medium (pour l'élément BODY); la valeur font-size de l'élément parent (pour tous les autres).

Exemples
body {font-size: 14pt}
p.teeny {font-size: x-small}
em {font-size: larger}
span.larger {font-size: 150%}
S'applique à 

Tous les éléments.

Javascript
[window.]document .getElementById("elementID") .style.fontSize

color
direction
font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
letter-spacing
line-break
line-height
text-align
text-decoration
text-indent
text-shadow
text-transform
vertical-align




Ce site vous a plu ? Visitez aussi : Conception de sites Internet et Le design des sites Web


Cette page est inspirée d'un texte anglophone extrait du livre HTML - Definitive Reference.
L'adaptation de ce texte a été réalisée par css-faciles.
Son contenu peut être recopié sous la condition express de faire figurer la présente mention
(y compris les 2 liens ci-dessus) dans le contenu copié.
This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.


Valid HTML 4.01 Transitional
Raccourcis
Contact liens d'évitement et raccourcis clavier Droits de copie Accueil Imprimer
Aller au menu