Przejdź do treści

CSS / Czcionki

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 - interpretuje Firefox 34, Opera 39, Chrome 52)

selektor { font-variant-caps: wariant }
Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

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

Komentarze

Zobacz więcej komentarzy

Facebook