Propriété CSS font-size
La propriété font-size définit la taille de police du texte.
La taille de police peut être définie de la manière suivante :
- absolute-size
- relative-size
- length
- percentage
La taille de police absolue comprend les valeurs suivantes :
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
La taille de police relative comprend les valeurs suivantes :
- smaller
- larger
Les longueurs peuvent être des longueurs relatives (em, ex, px) et des longueurs absolues (in, cm, mm, pt, pc). Les pourcentages spécifient une taille de police absolue relative à la taille de police de l’élément parent.
| Initial Value | medium |
|---|---|
| Applies to | Tous les éléments. Elle s’applique aussi à ::first-letter et ::first-line. |
| Inherited | Yes. |
| Animatable | Yes. |
| Version | CSS1 |
| DOM Syntax | object.style.fontSize = "15px"; |
Syntaxe
Syntaxe de la propriété CSS font-size
font-size: medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length | initial | inherit;Exemple de la propriété font-size :
Exemple de la propriété CSS font-size avec les valeurs px, em, pt, x-small et %(pourcentage)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
font-size: 24pt;
}
h3 {
font-size: 26px;
}
p {
font-size: 1em;
}
a {
font-size: 100%;
}
span {
font-size: x-small;
}
</style>
</head>
<body>
<span>This span is written with x-small value.</span>
<p>This paragraph is written with 1em font-size.</p>
<a href="https://www.w3docs.com/">This hyperlink is written with 100% font-size.</a>
<h3>We used x-small font size for this heading.</h3>
<h1>We set the font size 24pt for this heading.</h1>
</body>
</html>Résultat
Utilisation des valeurs en pourcentage
Les valeurs en pourcentage sont relatives à la taille de police de l’élément parent. Le code ci-dessous montre son utilisation :
Exemple de la propriété font-size spécifiée en pourcentage :
Exemple de la propriété font-size spécifiée en pourcentage :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h3 {
font-size: 125%;
}
</style>
</head>
<body>
<h3>We used x-small font size for this heading.</h3>
<span>This span is written with x-small value.</span>
<p>This paragraph is written with 1em font-size.</p>
</body>
</html>Utilisation de l’unité em
L’unité em est considérée comme une unité relative. Elle est basée sur la valeur calculée de la taille de police de son élément parent. Dans l’exemple ci-dessous, le paragraphe sera à 32px, car 2x16=32, et le titre aura une taille de police de 48px car 3x16=48px. Cette méthode est très utile, car nous pouvons être sûrs que tous les éléments enfants seront toujours relatifs les uns aux autres.
Exemple de la propriété font-size avec la valeur "em" :
Exemple de la propriété font-size avec la valeur "em" :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.container {
font-size: 16px;
}
p {
font-size: 2em;
}
h2 {
font-size: 3em;
}
</style>
</head>
<body>
<div class="container">
<h2>Here is the heading</h2>
<p>Here is the text.</p>
</div>
</body>
</html>Utilisation de l’unité rem
Dans le cas de l’utilisation de l’unité rem, la taille de police dépend de la valeur de l’élément HTML. Dans l’exemple ci-dessous, l’unité rem est héritée de l’élément HTML, c’est pourquoi elle est égale à 24px. Ainsi, le titre aura une taille de police de 24px, car 1.5x16=24px.
Exemple de la propriété font-size avec la valeur "rem" :
Exemple de la propriété font-size avec la valeur "rem" :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
font-size: 16px;
}
h2 {
font-size: 1.5rem;
}
</style>
</head>
<body>
<div class="container">
<h2>Here is the heading</h2>
<p>Here is the text.</p>
</div>
</body>
</html>Utilisation de l’unité ex
Dans le cas de l’unité ex, 1ex est égal à la hauteur calculée de la lettre 'x' dans la police de l’élément courant. Dans l’exemple de code ci-dessous, l’élément HTML est à 15px. La hauteur de x de cette police particulière déterminera toutes les autres tailles de police.
Propriété CSS font-size
.exunit {
font-size: 15ex;
}Utilisation des unités de viewport
Les unités de viewport (vw et vh) sont utilisées pour définir la taille de police d’un élément, relativement à la taille du viewport.
- 1vw = 1% de la largeur du viewport
- 1vh = 1% de la hauteur du viewport
Propriété CSS font-size
.viewport {
font-size: 120vh;
}Exemple de la propriété font-size avec la valeur "length" :
Exemple de la propriété font-size avec la valeur "length"
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
color: green;
font-size: 2vh;
}
p {
color: red;
font-size: 1em;
}
.length {
color: orange;
font-size: 30px;
}
h3 {
color: lightblue;
font-size: 3ex;
}
h1 {
color: purple;
font-size: 24pt;
}
a {
color: blue;
font-size: 120%;
}
</style>
</head>
<body>
<h2>Font-size property</h2>
<span>This text is written with 2vh font-size.</span>
<p>This paragraph is written with 1em font-size.</p>
<div class="length">Example with 30px font-size length </div>
<h3>Example with 3ex font-size length.</h3>
<h1>We set the font size 24pt for this heading.</h1>
<a href="https://www.w3docs.com/">This hyperlink is written with 100% font-size.</a>
</body>
</html>Exemple de la propriété font-size avec les valeurs absolute-size :
Exemple de la propriété font-size (absolute-size) :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.font-xxsmall {
color: grey;
font-size: xx-small;
}
.font-xsmall {
color: grey;
font-size: x-small;
}
.font-small {
color: grey;
font-size: small;
}
.font-medium {
color: grey;
font-size: medium;
}
.font-large {
color: grey;
font-size: large;
}
.font-xlarge {
color: grey;
font-size: x-large;
}
.font-xxlarge {
color: grey;
font-size: xx-large;
}
</style>
</head>
<body>
<h1>Font-size property</h1>
<div class="font-xxsmall">Example with font-size xx-small property</div>
<div class="font-xsmall">Example with font-size x-small property</div>
<div class="font-small">Example with font-size small property</div>
<div class="font-medium">Example with font-size medium property</div>
<div class="font-large">Example with font-size large property</div>
<div class="font-xlarge">Example with font-size x-large property</div>
<div class="font-xxlarge">Example with font-size xx-large property</div>
</body>
</html>Exemple de la propriété font-size avec les valeurs "smaller" et "larger" :
Exemple de la propriété font-size avec les valeurs "smaller" et "larger" :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.smaller {
color: red;
font-size: smaller;
}
.larger {
color: red;
font-size: larger;
}
</style>
</head>
<body>
<h1>font-size property</h1>
<div class="smaller">Example with font-size smaller property</div>
<div class="larger">Example with font-size larger property</div>
</body>
</html>Valeurs
| Value | Description | Play it |
|---|---|---|
| medium | Définit la taille de police sur medium. C’est la valeur par défaut de cette propriété. | Play it » |
| xx-small | Définit la taille de police sur xx-small. | Play it » |
| x-small | Définit la taille de police sur x-small. | Play it » |
| small | Définit la taille de police sur small. | Play it » |
| large | Définit la taille de police sur large. | Play it » |
| x-large | Définit la taille de police sur x-large. | Play it » |
| xx-large | Définit la taille de police sur xx-large. | Play it » |
| smaller | Rend la taille de police plus petite. | Play it » |
| larger | Rend la taille de police plus grande. | Play it » |
| length | Spécifie la taille de police en px, em, etc. | Play it » |
| % | Définit la taille de police en pourcentage de la taille de police de l’élément parent. | Play it » |
| initial | Fait utiliser à la propriété sa valeur par défaut. | Play it » |
| inherit | Hérite la propriété de l’élément parent. |
Practice
Which units can be used to set the 'font-size' property in CSS?