Wariant wielkości liter czcionki {font-variant-caps}
W jaki sposób przekształcić zwykły tekst w kapitaliki, czyli napisany wielkimi literami, lecz czcionką o wysokości małych liter?
CSS 3
selektor { font-variant-caps: wariant }Natomiast jako "wariant" należy wpisać:
- normal - czcionka normalna (podstawowa)
- small-caps - kapitaliki, czyli tekst napisany wielkimi literami, lecz czcionką o wysokości zbliżonej np. do małej litery "x"
- all-small-caps - kapitaliki zastosowane do całego tekstu bez względu, czy oryginalnie znajdowały się w nim małe czy wielkie litery
- petite-caps - niższe kapitaliki (jeżeli czcionka nie zawiera takiego wariantu, działa tak samo jak small-caps)
- all-petite-caps - niższe kapitaliki zastosowane do całego tekstu bez względu, czy oryginalnie znajdowały się w nim małe czy wielkie litery (jeżeli czcionka nie zawiera takiego wariantu, działa tak samo jak all-small-caps)
- unicase - mieszanka kapitalików i normalnych małych liter najczęściej dobrana w taki sposób, aby miały wysokość zbliżoną np. do wielkiej litery "X"
- titling-caps - wariant używany w tytułach i nagłówkach zwykle w postaci mniej wytłuszczonych liter (nie każda czcionka obsługuje ten wariant)
Polecenie pozwala zmieniać typografię (układ) tekstu poprzez przekształcenie wielkości liter tak, aby prezentowały się w sposób bardziej ciekawy. Czasami w ten sposób prezentuje się nagłówki, tytuły i inne fragmenty tekstu, które wymagają specjalnego wyróżnienia, a zwyczajne pochylenie czy pogrubienie z jakichś względów nie jest odpowiednie.
Jeśli zależy Ci na obsłudze również starszych przeglądarek, zamiast tego polecenia użyj: "font-variant: small-caps". Niestety tylko ten jeden wariant (zwykłe kapitaliki) ma szerokie wsparcie i tylko przy użyciu własności font-wariant, a nie font-variant-caps.
Przykład {font-variant-caps}
Wariant wielkości liter normal
Wariant wielkości liter small-caps
Wariant wielkości liter all-small-caps
Wariant wielkości liter petite-caps
Wariant wielkości liter all-petite-caps
Wariant wielkości liter unicase
Wariant wielkości liter titling-caps
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | |
|---|---|---|---|---|---|
font-variant-caps: wartość | 52 2016-07-20 | 34 2014-12-01 | 79 2020-01-15 | 39 2016-08-02 | 9.1 2016-03-21 |
font-variant-caps: all-petite-caps | 52 2016-07-20 | 34 2014-12-01 | 79 2020-01-15 | 39 2016-08-02 | 9.1 2016-03-21 |
font-variant-caps: all-small-caps | 52 2016-07-20 | 34 2014-12-01 | 79 2020-01-15 | 39 2016-08-02 | 9.1 2016-03-21 |
font-variant-caps: normal | 52 2016-07-20 | 34 2014-12-01 | 79 2020-01-15 | 39 2016-08-02 | 9.1 2016-03-21 |
font-variant-caps: petite-caps | 52 2016-07-20 | 34 2014-12-01 | 79 2020-01-15 | 39 2016-08-02 | 9.1 2016-03-21 |
font-variant-caps: small-caps | 52 2016-07-20 | 34 2014-12-01 | 79 2020-01-15 | 39 2016-08-02 | 9.1 2016-03-21 |
font-variant-caps: titling-caps | 52 2016-07-20 | 34 2014-12-01 | 79 2020-01-15 | 39 2016-08-02 | 9.1 2016-03-21 |
font-variant-caps: unicase | 52 2016-07-20 | 34 2014-12-01 | 79 2020-01-15 | 39 2016-08-02 | 9.1 2016-03-21 |