Propriété CSS font-variant

La propriété font-variant permet de définir le texte à normal ou small-caps d'une famille de police.

La propriété font-variant est affichée par deux valeurs: normal et small-caps. Normal est la valeur initiale. Quand on sélécte small-caps pour un texte, elle fait les lettres minuscules aux lettres majuscules mais ces lettres convertis seront affichés un peut plus petits quand les lettres majuscules normals.

Cette propriété a été prolongée en CSS3.
Valeur initiale normal
Appliquée à Tous les éléments. Elle est aussi appliquée aux éléments pseudos ::first-letter et ::first-line.
Héritée Oui.
Animable Non.
Version CSS1
Syntaxe DOM object.style.fontVariant = "normal";

Syntaxe

font-variant: normal | small-caps | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .smallcaps {
      font-variant: small-caps;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété font-variant </h2>
    <p>Comme vous le voyez, ici nous avons utilisé un texte normal.</p>
    <p class="smallcaps">Mais Nous Avons Utilisé Un Texte Avec Small-Caps Ici.</p>
  </body>
</html>

Valeurs

Valeur Description
normal Signifie que les caractères de texte seront normal. C'est la valeur initiale de cette propriété.
small-cups Le navigateur affiche une police small-caps.
initial Définit la valeur initiale.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

Pratiquez vos connaissances

Qu'est-ce que l'attribut 'font-variant' en CSS?
Trouvez-vous cela utile?