Taille de la police - Astuces CSS

La font-sizepropriété spécifie la taille ou la hauteur de la police. font-sizeaffecte non seulement la police à laquelle il est appliqué, mais est également utilisé pour calculer la valeur des unités de longueur em, rem et ex.

p ( font-size: 20px; )

font-sizepeut accepter des mots clés, des unités de longueur ou des pourcentages comme valeurs. Il est important de noter cependant que lorsqu'elle est déclarée comme faisant partie de la fontpropriété abrégée, font-sizec'est une valeur obligatoire. S'il n'est pas inclus dans le raccourci, la ligne entière est ignorée.

Les valeurs de longueur (par exemple px, em, rem, ex, etc.) qui sont appliquées font-sizene peuvent pas être négatives.

Mots-clés et valeurs absolus

.element ( font-size: small; )

Il accepte les valeurs de mot-clé absolues suivantes:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

Ces valeurs absolues sont mappées à des tailles de police spécifiques telles que calculées par le navigateur. Mais vous pouvez également utiliser deux valeurs de mot-clé qui sont relatives à la taille de police de l'élément parent.

Les autres valeurs absolues incluent mm(millimètres), cm(centimètres), in(pouces), pt(points) et pc(picas). Un point est égal à 1/72 de pouce tandis qu'un pica est égal à 12 points - ces valeurs sont généralement utilisées pour les documents imprimés.

Mots-clés relatifs

.element ( font-size: larger; )

• larger
• smaller

Par exemple, si l'élément parent a une taille de police de small, un élément enfant avec une taille relative définie de largerrendra la taille de police égale à mediumpour l'élément enfant.

Valeurs en pourcentage

.element ( font-size: 110%; )

Les valeurs de pourcentage, telles que la définition d'une taille de police de 110%, sont également relatives à la taille de police de l'élément parent, comme indiqué dans la démo ci-dessous:

Voir le Pen qdbELL par CSS-Tricks (@ css-tricks) sur CodePen.

L'unité em

.element ( font-size: 2em; )

L'unité em est une unité relative basée sur la valeur calculée de la taille de police de l'élément parent. Cela signifie que les éléments enfants dépendent toujours de leur parent pour définir leur taille de police. Par exemple:

 
This is a heading
This is some text.

.container ( font-size: 16px; ) p ( font-size: 1em; ) h2 ( font-size: 2em; )

Dans l'exemple ci-dessus, le paragraphe aura une taille de police de 16px car 1 x 16 = 16px alors que le titre sera de 32px car 2 x 16 = 32px. La mise à l'échelle du type présente de nombreux avantages en fonction de la taille de la police de l'élément parent, à savoir que nous pouvons envelopper des éléments dans un conteneur et savoir que tous les enfants seront toujours relatifs les uns aux autres:

Voir le stylo Comprendre comment l'unité em fonctionne par CSS-Tricks (@ css-tricks) sur CodePen.

L'unité rem

Dans le cas des unités rem, cependant, la taille de la police dépend de la valeur de l'élément racine (ou de l' htmlélément).

html ( font-size: 16px; ) p ( font-size: 1.5rem; )

Dans l'exemple ci-dessus, l'unité rem est égale à 16px (car elle est héritée de l' htmlélément / root) et donc la taille de la police pour tous les éléments de paragraphe sera calculée à 24px (1,5 x 16 = 24). Contrairement aux unités em, le paragraphe ignorera le style de tous ses parents en plus de la racine.

Cet appareil est pris en charge par les navigateurs suivants:

Chrome	Safari	Firefox	Opéra	C'EST À DIRE	Android	iOS
Travaux	Travaux	Travaux	Travaux	10+	Travaux	Travaux

L'unité ex

.element ( font-size: 20ex; )

Pour les unités ex, 1ex serait égal à la hauteur calculée de la lettre minuscule x de l'élément racine. Ainsi, dans l'exemple ci-dessous, l' htmlélément est défini sur 20pxet toutes les autres tailles de police sont déterminées par la hauteur x de cette police particulière.

Voir le stylo comprendre comment fonctionne l'unité ex par CSS-Tricks (@ css-tricks) sur CodePen.

Expérimentez avec la démo ci-dessus en remplaçant l' élément font-familysur l' htmlélément pour voir comment les autres tailles de police changent.

Unités de fenêtre

.element-one ( font-size: 100vh; ) .element-two ( font-size: 100vw; )

Les unités de fenêtre , telles que vwet vh, définissent la taille de la police d'un élément par rapport aux dimensions de la fenêtre:

• 1vw = 1% de la largeur de la fenêtre
• 1vh = 1% de la hauteur de la fenêtre

Donc, si nous prenons l'exemple suivant:

.element ( font-size: 100vh; )

Ensuite, cela indiquera que la taille de la police de l'élément doit toujours être de 100% de la hauteur de la fenêtre d'affichage à tout moment (50vh serait 50%, 15vh serait 15% et ainsi de suite). Dans la démo ci-dessous, essayez de redimensionner la hauteur de l'exemple pour regarder l'étirement du type:

Voir le type de dimensionnement du stylet avec les unités vh par CSS-Tricks (@ css-tricks) sur CodePen.

vw Les unités sont différentes en ce sens qu'elles définissent la hauteur des lettres en fonction de la largeur de la fenêtre, donc dans la démo ci-dessous, vous devrez redimensionner la fenêtre du navigateur horizontalement pour voir ces changements:

Voir le type de dimensionnement du stylet avec les unités vw par CSS-Tricks (@ css-tricks) sur CodePen.

Ces unités sont prises en charge par les navigateurs suivants:

Chrome	Safari	Firefox	Opéra	C'EST À DIRE	Android	iOS
31+	7+	31+	27+	9+	4.4+	7.1+

Il est important de noter qu'il existe deux autres unités de fenêtre: vminet vmax. Le premier trouvera les valeurs de vhet vwet définira la taille de la police comme la plus petite des deux, tandis que vmaxla taille de la police sera la plus grande de ces deux valeurs.

L'unité CH

.element ( font-size: 24ch; )

L' chunité est similaire à l' exunité en ce qu'elle définira la taille de la police d'un élément par rapport à la largeur du glyphe 0 (zéro) de la police:

Voir le type de dimensionnement du stylet avec les unités ch par CSS-Tricks (@ css-tricks) sur CodePen.

Cet appareil est pris en charge par:

Chrome	Safari	Firefox	Opéra	C'EST À DIRE	Android	iOS
27+	Travaux	10+	Travaux	9+	Travaux	Travaux