font-size CSS propriété

Définition de la CSS font-size.

La propriété de Taille de Fonte CSS font-size permet de spécifier la taille de la fonte dans lequelle sera affiché le texte d'un élément (X)HTML.

Exemple de syntaxe CSS font-size :

font-size : xx-small;
font-size : medium;
font-size : 15px;
font-size : 1em;
font-size : 0.5%;

La propriété de feuille de style font-size CSS peut prendre la valeur de taille :

numérique positif suivi d'une unité CSS de longueur (%, ex ou em, etc... sont relatives à la taille de fonte de l'élément parent).
xx-small : une taille absolue de fonte de 0.6 x medium.
x-small : une taille absolue de fonte de 0.75 x medium.
small : une taille absolue de fonte de 8/9 x medium.
medium : une taille absolue de fonte de 1 x medium.
large, une taille absolue de fonte de 1.2 x medium.
x-large : une taille absolue de fonte de 1.5 x medium.
xx-large : une taille absolue de fonte de 2 x medium.
larger : une taille relative de fonte plus grande que la valeur héritée.
smaller : une taille relative de fonte plus petite que la valeur héritée.
inherit : hérite de la propriété CSS font-size de son parent (CSS2).

Trouver l'équivalence entre les unités de px, em, % et pt?

Exemple de code font-size CSS

Conditions d'application de la CSS font-size.

La propriété de feuille de style font-size CSS est applicable sur l'ensemble des balises HTML ou XHTML.

La valeur de la CSS font-size peut être mise directement dans la propriété de raccourci CSS font.

Héritage des valeurs Css de font-size.

Les balises filles HTML ou XHTML héritent de la propriété Taille de Fonte CSS font-size.

Problème d'interprétation de font-size en Css.

La propriété de feuille de style font-size CSS pose des problèmes d'héritage sur les balises ayant déjà une taille spécifique comme la balise HTML ou XHTML H. La valeur calculé des tailles relatives de fonte varient selon les navigateurs.

Conditions d'animation de font-size en CSS3.

La CSS font-size est une propriété de feuille de style qui peut être utilisée pour les animations CSS et transitions CSS.

Règles de syntaxes CSS pour font-size.

Règles des tailles absolues et équivalences avec le Html

Voici les équivalences entre la valeur nommée et les balise H* et la balise font.
xx-small correspond à :

l'échelle 3/5,
la taille de la balise h6,
la valeur 1 de l'attribut size de la balise font.
si medium est égale 16px alors la valeur calculé de la taille est d'environ 9px.

x-small correspond à :

l'échelle 3/4.
si medium est égale 16px alors la valeur calculé de la taille est d'environ 10px.

small correspond à :

l'échelle 8/9,
la taille de la balise h5,
la valeur 2 de l'attribut size de la balise font.
si medium est égale 16px alors la valeur calculé de la taille est d'environ 13px.

medium correspond à :

l'échelle 1,
la taille de la balise h4,
la valeur 3 de l'attribut size de la balise font.
sur la plus part des navigateurs, sa valeur est de 12pt ou 16px, mais peut varier suivant les navigateurs.

large correspond à :

l'échelle 6/5,
la taille de la balise h3,
la valeur 4 de l'attribut size de la balise font.
si medium est égale 16px alors la valeur calculé de la taille est d'environ 18px.

x-large correspond à :

l'échelle 3/2,
la taille de la balise h2,
la valeur 5 de l'attribut size de la balise font.
si medium est égale 16px alors la valeur calculé de la taille est d'environ 24px.

xx-large correspond à :

l'échelle 2/1,
la taille de la balise h1,
la valeur 6 de l'attribut size de la balise font.
si medium est égale 16px alors la valeur calculé de la taille est d'environ 32px.

Règles des tailles relatives

Si la valeur de la propriété CSS font-size est larger et que la propriété héritée est medium alors la fonte sera affichée avec la valeur plus grande suivante soit large. Si la valeur héritée est xx-large la fonte sera affichée avec cette valeur.

Si la valeur de la propriété CSS font-size est smaller et que la propriété héritée est medium alors la fonte sera affichée avec la valeur plus petite suivante soit small . Si la valeur héritée est xx-small la fonte sera affichée avec cette valeur.

Si la valeur hérité ne correspond pas à une valeur de taille absolue de fonte, le ratio devrait être de 1.2.

Compatibilités navigateurs de la propriété font-size

Détails des versions de la CSS font-size: Propriété font-size est compatible avec CSS1 et plus.; Propriété font-size est compatible avec CSS2 et plus.

Résumé du support navigateurs de la CSS font-size: Propriété CSS font-size est compatible à partir de Chrome 1; Propriété CSS font-size est compatible à partir de Firefox 1.7; Propriété CSS font-size est compatible à partir de Internet Explorer 6; Propriété CSS font-size est compatible à partir de Opera 7; Propriété CSS font-size est compatible à partir de Safari 1; Propriété CSS font-size est compatible à partir de Chrome Android 1; Propriété CSS font-size est compatible à partir de Internet Explorer mobile 6; Propriété CSS font-size est compatible à partir de iOS Safari 1; Propriété CSS font-size est compatible à partir de Opera Mini 6

Equivalence de la CSS font-size en HTML.

La propriété de feuille de style de Taille de Fonte font-size CSS peut remplacer en HTML est l'attribut SIZE de la balise HTML FONT.

Flash mx `font-size` CSS

Pour les utilisateurs de Flash, l'équivalence actionscript de la feuille de style font-size est fontSize. Seules les valeurs numériques sont acceptées, l'unité est le pixel (pour flash le px = pt).

Exemples et astuces CSS pour utiliser font-size

Mettre une taille de police par défaut.

Vous pouvez spécifier une taille par défaut mais aussi une police ou une couleur grâce aux feuilles des style css.
Il vous suffit définir les propriétés CSS pour la balise BODY ou HTML.

Exemple de code :

html { font-size: 12px }
/* */
body { font-size: 12px }

A partir d'internet explorer 6, si vous spécifier une DTD valide la valeur initial est small et non medium.

Votre avis sur la définition font-size en CSS

Votez pour la définition CSS `font-size`

Votes: 4.1 / 5 - 33 votes
Cliquez sur une étoile pour voter.