La font-variantpropriété vous permet de changer le texte ciblé en petites majuscules. Cette propriété a été étendue dans CSS3.
p:first-line ( font-variant: small-caps; /* default is `normal` */ )Avant CSS3, cette propriété acceptait l'une des deux valeurs possibles: normal(comment le texte est rendu par défaut) et small-caps.
Une valeur de small-capsrendra le texte en lettres majuscules plus petites que les lettres majuscules normales. Cela ne remplace pas les majuscules définies dans le contenu, à l'intérieur du balisage. Par exemple:
Dans la démonstration ci-dessus, les deux paragraphes sont définis sur font-variant: small-caps. Le premier paragraphe n'a que la première lettre majuscule dans le balisage, donc il apparaît comme prévu (première lettre majuscule, reste en petites majuscules).
La deuxième ligne est écrite en majuscules dans le balisage, ce qui remplace la small-capsvaleur, mettant tout en majuscules normales.
Pour aller plus loin, si ces paragraphes sont définis sur font-variant: small-capset text-transform: lowercase, ils apparaîtront en toutes petites majuscules. De même, si ces paragraphes sont définis sur font-variant: small-capset text-transform: uppercase, ils apparaîtront dans toutes les majuscules normales.
font-variantpeuvent être inclus dans une fontdéclaration sténographique.
Nouveaux ajouts dans CSS3
En CSS3, font-variantdevient un raccourci et peut accepter plusieurs valeurs, y compris all-small-caps, petite-caps, all-petite-caps, titling-capset unicase, entre autres.
Prise en charge du navigateur
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| Travaux | Travaux | Travaux | Travaux | Travaux | Travaux | Travaux |
Les nouvelles valeurs ajoutées dans CSS3 n'ont pas de prise en charge du navigateur, donc le tableau ci-dessus représente la prise en charge d'une valeur de small-caps.
Dans IE6 / 7, le réglage font-variant: small-capsfera apparaître tout texte défini sur text-transform: uppercaseou text-transform: lowercasecomme text-transform: none.