A font-varianttulajdonság lehetővé teszi, hogy a célzott szöveget kicsiny nagyra változtassa. Ezt a tulajdonságot kiterjesztették a CSS3-ban.
p:first-line ( font-variant: small-caps; /* default is `normal` */ )A CSS3 előtt ez a tulajdonság elfogadta a két lehetséges érték egyikét: normal(a szöveg alapértelmezés szerint megjelenítve) és small-caps.
A (z) értéke a small-capsrendes nagybetűknél kisebb nagybetűkkel jeleníti meg a szöveget. Ez nem írja felül a tartalom felső jelölését, a jelölőn belül. Például:
A fenti bemutatóban mindkét bekezdés értéke font-variant: small-caps. Az első bekezdésben csak az első betű nagybetűje van a jelölésben, így a várakozásoknak megfelelően jelenik meg (első betű nagybetű, a többi kisbetűvel).
A második sor egész nagybetűvel van megírva a jelölésben, amely felülírja az small-capsértéket, mindent rendes nagybetűvel állítva.
Ezt tovább véve, ha ezek a bekezdések értéke font-variant: small-capsés text-transform: lowercase, akkor azok minden kis nagybetűvel megjelennek. Hasonlóképpen, ha ezek a bekezdések értéke font-variant: small-capsés text-transform: uppercase, akkor azok minden rendes nagybetűvel megjelennek.
font-variantfontgyorsírási nyilatkozat részeként szerepelhet .
Új kiegészítések a CSS3-ban
A CSS3 font-variantválik gyors- és el tudja fogadni több értéket, beleértve all-small-caps, petite-caps, all-petite-caps, titling-caps, és unicase, többek között.
Böngésző támogatás
| Króm | Szafari | Firefox | Opera | AZAZ | Android | iOS |
|---|---|---|---|---|---|---|
| Művek | Művek | Művek | Művek | Művek | Művek | Művek |
A CSS3-ban hozzáadott új értékek nem támogatják a böngészőt, ezért a fenti táblázat a small-caps.
Az IE6 / 7 rendszerben a beállítás font-variant: small-capsbármely text-transform: uppercasevagy text-transform: lowercasea szövegre állított vagy hasonló szövegűnek tűnik text-transform: none.