4.1 Propriété font-style
CSS offre de nombreuses propriétés pour gérer les polices et leur affichage sur les pages web. Les propriétés
font-style, font-variant et font-stretch permettent de personnaliser le style du texte,
son affichage et sa largeur. Examinons chacune de ces propriétés de plus près.
La propriété font-style définit le style du texte. Elle est utilisée pour établir une inclinaison
(italique) ou un style de texte normal.
Valeurs :
normal: style de texte normal (par défaut)italic: texte incliné (italique)oblique: texte incliné, similaire à italic, mais avec une inclinaison différente
Exemple d'utilisation :
.normal {
font-style: normal;
}
.italic {
font-style: italic;
}
.oblique {
font-style: oblique;
}
<body>
<p class="normal">Ceci est un texte normal.</p>
<p class="italic">Ceci est un texte en italique.</p>
<p class="oblique">Ceci est un texte en oblique.</p>
</body>
4.2 Propriété font-variant
La propriété font-variant contrôle l'affichage du texte en petites capitales. Elle permet de modifier
la police de façon à ce que toutes les lettres deviennent capitales, mais avec une taille réduite pour les lettres qui étaient initialement en bas-de-casse.
Valeurs :
normal: texte normal (par défaut)small-caps: texte en petites capitales
Exemple d'utilisation :
.normal {
font-variant: normal;
}
.small-caps {
font-variant: small-caps;
}
<body>
<p class="normal">Ceci est un texte normal.</p>
<p class="small-caps">Ceci est un texte en petites capitales.</p>
</body>
Valeurs supplémentaires (CSS Fonts Level 4)
CSS Fonts Level 4 ajoute des valeurs supplémentaires pour la propriété font-variant, telles que all-small-caps, petite-caps,
all-petite-caps, unicase et titling-caps. Toutefois, elles ne sont pas supportées par tous les navigateurs.
4.3 Propriété font-stretch
La propriété font-stretch contrôle le degré de compression ou d'étirement de la police. Elle modifie la largeur de la police, sans influencer la hauteur,
et est utilisée pour choisir la variante de police appropriée, si elle est disponible.
Valeurs :
normal: largeur normale de la police (par défaut)ultra-condensed: police ultra-compresséeextra-condensed: police très compresséecondensed: police compresséesemi-condensed: police modérément compresséesemi-expanded: police modérément étendueexpanded: police étendueextra-expanded: police très étendueultra-expanded: police ultra-étendue
Exemple d'utilisation :
.normal {
font-stretch: normal;
}
.condensed {
font-stretch: condensed;
}
.expanded {
font-stretch: expanded;
}
<body>
<p class="normal">Ceci est un texte avec une largeur de police normale.</p>
<p class="condensed">Ceci est un texte avec une largeur de police compressée.</p>
<p class="expanded">Ceci est un texte avec une largeur de police étendue.</p>
</body>
GO TO FULL VERSION