Propriété CSS font-variant

La propriété font-variant définit le texte en normal ou en petites capitales.

La propriété font-variant peut prendre deux valeurs : normal et small-caps. normal est la valeur par défaut. Lorsque nous sélectionnons small-caps pour un texte, il convertit les lettres minuscules en majuscules, mais ces lettres converties seront affichées légèrement plus petites que les majuscules normales.

La propriété font-variant peut être incluse dans une déclaration abrégée font.

INFO

Cette propriété a été étendue dans CSS Fonts Module Level 4. En CSS moderne, la propriété font-variant peut prendre plusieurs valeurs supplémentaires (par ex. petite-caps, all-petite-caps, all-small-caps, titling-caps). Notez que la prise en charge de ces valeurs modernes par les navigateurs peut varier.

Valeur initiale	normal
S'applique à	Tous les éléments. Il s'applique également à ::first-letter et ::first-line.
Hérité	Oui.
Animable	Non.
Version	CSS1
Syntaxe DOM	object.style.fontVariant = "normal"; `<br>`(Note : `fontVariant` est le nom de propriété JavaScript en camelCase pour `font-variant`.)

Syntaxe

Syntaxe de la propriété CSS font-variant

css

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

Exemple de la propriété font-variant :

Exemple de la propriété CSS font-variant avec small-caps

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .smallcaps {
        font-variant: small-caps;
      }
    </style>
  </head>
  <body>
    <h2>Font-variant property example</h2>
    <p>Here we used a normal text as you can see.</p>
    <p class="smallcaps">However, this text uses small-caps.</p>
  </body>
</html>

Try it Yourself »

Résultat

CSS font-variant Property

Valeurs

Valeur	Description	Jouer
normal	Indique que les caractères du texte seront normaux. Il s'agit de la valeur par défaut de cette propriété.	Jouer »
small-caps	Convertit les lettres minuscules en majuscules, mais les affiche à une taille plus petite que les majuscules régulières.	Jouer »
all-small-caps	Convertit toutes les lettres en petites capitales.	Jouer »
titling-caps	Affiche le texte en capitales de titre, généralement utilisé pour les titres.	Jouer »
initial	Définit la propriété sur sa valeur par défaut.	Jouer »
inherit	Hérite la valeur de la propriété de son élément parent.

Pratique

Que fait la propriété CSS 'font-variant' ?

Elle spécifie la ligne de base d'une police.Elle spécifie si un texte doit ou non être affiché dans une police en petites capitales.Elle modifie l'espacement entre les lettres.Il s'agit d'une propriété abrégée pour 'font-variant-caps', 'font-variant-numeric', 'font-variant-alternates', 'font-variant-ligatures' et 'font-variant-east-asian'.Elle détermine la hauteur d'une ligne.

Propriété CSS font-variant ​

Syntaxe ​

Exemple de la propriété font-variant : ​

Résultat ​