mozilla
Vos résultats de recherche

    font-size

    Résumé

    La propriété CSS font-size spécifie la taille de police - plus précisément la hauteur des glyphes de la police. Celle-ci peut aussi changer la taille de police d'autres éléments, car elle est utilisée pour calculer la valeur des unités de longueur em et ex.

    Syntaxe

    font-size: xx-small | x-small | small | medium | large | x-large | xx-large
    font-size: smaller | larger
    font-size: <length> | <percentage> | inherit

    Valeurs

    xx-small, x-small, small, medium, large, x-large, xx-large
    Un ensemble de mots clefs, de taille absolue, définit par rapport à la taille de police par défaut de l'utilisateur (qui est medium). Similaire au code de présentation HTML <font size="1"> à <font size="7">, où la taille de police par défaut de l'utilisateur est <font size="3">.
    larger, smaller
    Plus grande ou plus petite que la taille de police de l'élément parent, approximativement le ratio utilisé pour séparer les mots clefs de tailles absolues ci-dessus.
    <length>
    Une longueur positive. Lorsque les unités sont définies en em ou ex, la taille est définie de manière relative à la taille de la police de l'élément parent de l'élément en question. Par exemple, 0.5em est la moitié de la taille de la police du parent de l'élément courant.
    <percentage> 
    Un pourcentage positif par rapport à la taille de police de l'élément parent.

    Il est préférable d'éviter l'emploi de valeurs n'étant pas relatives à la taille de police par défaut de l'utilisateur, telles que des <lengths> avec des unités autres que em ou ex. Cependant, si de telles valeurs doivent être utilisées, px est préférable aux autres unités car leur signification ne varie pas en fonction des caractéristiques du système d'exploitation (généralement incorrectes) comme la résolution d'écran.

    Approches possibles

    Il existe plusieurs manières de définir la taille de la police, avec des mots-clés ou des valeurs numériques en pixels ou em. Choisissez la méthode appropriée selon les besoins particuliers de la page web.

    Mots-clés

    Les mots-clés sont une bonne manière de définir la taille des polices sur le Web. En utilisant un mot-clé pour la taille de la police sur l'élément body, vous pouvez dimensionner les polices de manière relative sur tous les éléments de la page, vous permettant ainsi d'augmenter ou réduire la taille de la police sur toute la page très facilement.

    Pixels

    Définir la taille de la police en utilisant des valeurs exprimées en pixels (px) est un bon choix lorsque vous visez une précision au pixel près. Une valeur en pixels est statique. C'est une manière indépendante du système d'exploitation et du navigateur de définir comment les lettres doivent apparaître. Les résultats peuvent varierlégèrement selon les navigateurs puisqu'ils utilisent des algorithmes différents pour obtenir des résultats similaires.

    Il est aussi possible d'utiliser conjointement les deux méthodes. Par exemple, si un élément parent est défini à 16px et que ces enfants sont définis à larger, la taille de la police des enfants sera plus grande que celle de l'élément parent sur la page.

    Note : définir la tailles des polices en pixels n'est pas accessible, puisque les utilisateurs ne peuvent pas changer la taille dans un réglage de leur navigateur. (Par exemple, les utilisateurs ayant une vision réduite peuvent souhaiter définir une taille de police beaucoup plus grande que celle choisie par de concepteur.) Ainsi, il faut éviter de définir la taille des polices en pixels si vous souhaitez créer un mise en page accessible.

    L'unité em

    Une autre manière de définir la taille des polices est d'avoir recours aux valeurs définies en em. La taille d'un em est dynamique. Lors de la définition de la propriété font-size, un em est égal à la taille de la police appliquée au parent de l'élément en question. Si vous n'avez défini aucune taille de police sur la page, alors c'est égal à la valeur par défaut du navigateur, qui est probablement 16px. Ainsi, par défaut, 1em = 16px et 2em = 32px. Si vous définissez la valeur de font-size à 20px sur l'élément body, alors 1em = 20px et 2em= 40px. Il faut remarquer que la valeur 2 est simplement un multiplicateur de la valeur courante de la taille d'un em.

    De manière à calculer l'équivalent en em de la taille visée en pixels, vous pouvez utilisez cette formule

    em = taille désirée en pixel pour l'élément visé / valeur de font-size du parent en pixels

    Par exemple, supposons que la taille de la police du corps de la page est fix à 1em et que la valeur par défaut du navigateur est 1em = 16px. Si la taille de police que vous souhaitez est 12px, alors vous devrez spécifier 0.75em (car 12/16 = 0.75). De manière similaire, si vous voulez une taille de 10px, vous devrez spécifier 0.625em (10/16 = 0.625). Pour 22px, spéficiez 1.375em (22/16).

    Une technique courante à utiliser dans la totalité du document est de définir la taille de la police de l'élément body à 62.5% (c'est à dire 62.5% de la valeur par défaut qui est 16px), ce qui vaut 10px, ou 0.625em. Vous pouvez désormais définir la taille des polices à l'aide de l'unité em, et profiter d'une conversion facile, en divisant la valeur visée en pixels par 10. De cette manière, 6px = 0.6em, 8px = 0.8em, 12px = 1.2em, 14px = 1.4 em, 16px = 1.6em. Par exemple :

    body {
      font-size: 62.5%; /* font-size 1em = 10px *
    }
    p {
      font-size: 1.6em; /* 1.6em = 16px *
    }

    L'unité em est très utile en CSS, puisqu'elle permet de s'adapter facilement à la taille de police utilisée par le lecteur.

    Exemples

    Example 1

    /* Définit la taille du texte pour être très grand. */
    p { font-size: xx-large }
    
    /* Définit le texte de h1 (premier niveau d'en-tête 1) pour être 2,5 fois la taille du texte autour */
    h1 { font-size: 250% }
    
    /* Définit le texte dans les balises span pour faire 16px */
    span { font-size: 16px; }
    

    Example 2

    .small {
    	font-size: xx-small;
    }
    .larger {
    	font-size: larger;
    }
    .point {
    	font-size: 24pt;
    }
    .percent {
    	font-size: 200%;
    }
    
    <h1 class="small">Small H1</h1>
    <h1 class="larger">Larger H1</h1>
    <h1 class="point">24 point H1</h1>
    <h1 class="percent">200% H1</h1>

    Exemple interactif

    Notes

    Les unités em et ex de la propriété font-size sont relatives à la taille de police de l'élément parent (contrairement aux autres propriétés, qui sont relatives à la taille de police de l'élément [NdT: seule exception à la règle CSS1]}. Cela signifie que les unités em et les pourcentages produisent le même effet pour la propriété font-size.

    Spécifications

    Spécification État Commentaire
    CSS Fonts Module Level 3
    La définition de 'font-size' dans cette spécification.
    Candidate Recommendation Aucun changement.
    CSS Transitions
    La définition de 'font-size' dans cette spécification.
    Working Draft Définit font-size comme pouvant être animé.
    CSS Level 2 (Revision 1)
    La définition de 'font-size' dans cette spécification.
    Recommendation Aucun changement.
    CSS Level 1
    La définition de 'font-size' dans cette spécification.
       

    Compatibilité des navigateurs

    Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Support de base 1.0 1.0 (1.7 ou moins) 5.5 7.0 1.0
    Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Support de base 1.0 1.0 (1) 6.0 6.0 1.0

    Voir également

    Étiquettes et contributeurs liés au document

    Contributors to this page: teoli, Fredchat, FredB, Mgjbot, Kyodev, anthony.gaidot, louuis
    Dernière mise à jour par : Fredchat,