Propriété font-style CSS
La propriété font-style définit le style de police pour un texte. Cette propriété possède trois valeurs : normal, italic et oblique.
L'italique est un style de police cursif, tandis que l'oblique est une version inclinée de la police standard.
| Valeur initiale | normal |
|---|---|
| S'applique à | Tous les éléments. S'applique également à ::first-letter et ::first-line. |
| Héritée | Oui. |
| Animable | Non. |
| Version | CSS1 |
| Syntaxe DOM | object.style.fontStyle = "oblique"; |
Syntaxe
Syntaxe de la propriété CSS font-style
font-style: normal | italic | oblique | initial | inherit;Exemple de la propriété font-style :
Exemple de la propriété font-style :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h3.normal {
font-style: normal;
}
</style>
</head>
<body>
<h2>Font-style property example</h2>
<h3 class="normal">We wrote this text as normal.</h3>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</body>
</html>Différence entre les styles de police italic et oblique
L'italique est considéré comme un style de police cursif, tandis que l'oblique est une version inclinée de la police standard. Cependant, la différence entre ces deux styles est très minime. L'exemple ci-dessous montrera l'utilisation des styles italic et oblique :
Exemple de la propriété font-style avec les valeurs "italic" et "oblique" :
Exemple de la propriété font-style avec les valeurs "italic" et "oblique" :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<h2>Font-style property example</h2>
<p class="italic">We wrote this text as italic.</p>
<p class="oblique">We wrote this text as oblique.</p>
</body>
</html>Exemple de la propriété font-style avec toutes les valeurs :
Exemple de la propriété font-style avec toutes les valeurs :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<h2>Font-style property example</h2>
<p class="normal">We wrote this text as normal.</p>
<p class="italic">We wrote this text as italic.</p>
<p class="oblique">We wrote this text as oblique.</p>
</body>
</html>Valeurs
| Valeur | Description | Tester » |
|---|---|---|
| normal | Indique que les caractères du texte seront normaux. Il s'agit de la valeur par défaut de cette propriété. | Tester » |
| italic | Le texte sera affiché en italique. | Tester » |
| oblique | Le texte sera affiché en oblique. | Tester » |
| initial | Définit la valeur par défaut de la propriété. | Tester » |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Comment la propriété font-style peut-elle être utilisée en CSS ?