font-variantOminaisuuden avulla voit muuttaa kohdistettuja teksti kapiteelit. Tätä ominaisuutta on laajennettu CSS3: ssa.
p:first-line ( font-variant: small-caps; /* default is `normal` */ )Ennen CSS3: ta tämä ominaisuus hyväksyi yhden kahdesta mahdollisesta arvosta: normal(miten teksti renderöidään oletuksena) ja small-caps.
Arvo small-capskostan tekstin isoilla kirjaimilla, jotka ovat pienempiä kuin tavalliset isot kirjaimet. Tämä ei korvaa merkinnän sisällä olevan sisällön ylärajajoukkoa. Esimerkiksi:
Edellä olevassa esittelyssä molemmat kappaleet on asetettu font-variant: small-caps. Ensimmäisessä kappaleessa on vain ensimmäisen kirjaimen isot kirjaimet, joten se näkyy odotetusti (ensimmäisen kirjaimen isot kirjaimet, loput pienissä kirjaimissa).
Toinen rivi on kirjoitettu merkinnän suurilla kirjaimilla, mikä ohittaa small-capsarvon asettamalla kaikki tavallisiin isoihin kirjaimiin.
Jos nämä kappaleet asetetaan kohtaan font-variant: small-capsja text-transform: lowercase, ne näkyvät kaikissa pienissä kirjaimissa. Vastaavasti, jos nämä kappaleet asetetaan arvoon font-variant: small-capsja text-transform: uppercase, ne näkyvät kaikissa tavallisissa isoissa kirjaimissa.
font-variantvoidaan sisällyttää fontlyhytaikaiseen ilmoitukseen.
Uudet lisäykset CSS3: ssa
CSS3, font-varianttulee pika ja voi hyväksyä useita arvoja, kuten all-small-caps, petite-caps, all-petite-caps, titling-caps, ja unicasemuun muassa.
Selaimen tuki
| Kromi | Safari | Firefox | Ooppera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Toimii | Toimii | Toimii | Toimii | Toimii | Toimii | Toimii |
CSS3: ssa lisätyillä uusilla arvoilla ei ole selaintukea, joten yllä oleva taulukko edustaa arvoa small-caps.
IE6 / 7: ssä asetus font-variant: small-capssaa tekstiksi asetetun text-transform: uppercasetai text-transform: lowercasenäyttämään tältä text-transform: none.