Ta font-variantwłaściwość umożliwia zmianę tekstu docelowego na małe litery. Ta właściwość została rozszerzona w CSS3.
p:first-line ( font-variant: small-caps; /* default is `normal` */ )Przed CSS3 ta właściwość akceptowała jedną z dwóch możliwych wartości: normal(domyślny sposób renderowania tekstu) i small-caps.
Wartość small-capswyrenderuje tekst wielkimi literami, które są mniejsze niż zwykłe wielkie litery. Nie powoduje to zastąpienia dużych liter ustawionych w treści wewnątrz znacznika. Na przykład:
W powyższym demo oba akapity są ustawione na font-variant: small-caps. Pierwszy akapit ma tylko pierwszą wielką literę w znaczniku, więc wygląda zgodnie z oczekiwaniami (pierwsza litera wielka, reszta kapitalikami).
Druga linia jest zapisana wielkimi literami w znaczniku, co przesłania small-capswartość, ustawiając wszystko jako zwykłe wielkie litery.
Idąc dalej, jeśli te akapity są ustawione na font-variant: small-capsi text-transform: lowercase, pojawią się one we wszystkich kapitalikach. Podobnie, jeśli te akapity są ustawione na font-variant: small-capsi text-transform: uppercase, będą one wyświetlane zwykłymi dużymi literami.
font-variantmożna dołączyć jako część fontdeklaracji skróconej.
Nowe dodatki w CSS3
W CSS3, font-variantstaje się skrótem i może przyjmować wiele wartości, w tym all-small-caps, petite-caps, all-petite-caps, titling-caps, i unicase, między innymi.
Wsparcie przeglądarki
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| Pracuje | Pracuje | Pracuje | Pracuje | Pracuje | Pracuje | Pracuje |
Nowe wartości dodane w CSS3 nie są obsługiwane przez przeglądarki, więc powyższa tabela przedstawia obsługę wartości small-caps.
W IE6 / 7 ustawienie font-variant: small-capsspowoduje, że tekst ustawiony na text-transform: uppercaselub text-transform: lowercasebędzie wyglądał jak text-transform: none.