Kurs HTML

Wprowadzenie: Kursywa i Kapitaliki

Oprócz rodziny, rozmiaru i wagi, CSS pozwala również kontrolować inne aspekty stylu czcionki, takie jak pochylenie (kursywa) oraz użycie kapitalików (małych liter wyglądających jak pomniejszone wersje wielkich liter).

Do kontroli pochylenia służy właściwość font-style, a do włączania kapitalików – font-variant.

Właściwość font-style

Właściwość font-style służy głównie do wyboru między normalnym tekstem a jego pochyloną wersją (kursywą).

Może przyjmować następujące wartości:

• normal: Wyświetla tekst normalnie, bez pochylenia. Jest to wartość domyślna.
• italic: Wyświetla tekst przy użyciu dedykowanej wersji kursywnej czcionki (jeśli jest dostępna). Czcionki kursywne (italic) są często specjalnie zaprojektowane przez typografa i mogą mieć inny kształt liter niż tylko mechanicznie pochylona wersja normalna.
• oblique: Wyświetla tekst przez mechaniczne pochylenie normalnej wersji czcionki. Jest to efekt symulowany przez przeglądarkę, jeśli dedykowana wersja italic nie jest dostępna. Można opcjonalnie podać kąt pochylenia (np. oblique 10deg), ale wsparcie dla kąta jest ograniczone.

p {
  font-style: normal;
}

em, i {
  /* Elementy em i i domyślnie mają styl italic */
  font-style: italic; 
}

.cytat {
  font-style: italic;
}

.pochylony-sztucznie {
  /* Przeglądarka spróbuje użyć italic, a jeśli nie ma, pochyli normalną wersję */
  font-style: oblique; 
}

.pochylony-o-kat {
  /* Wsparcie dla kąta może być ograniczone */
  font-style: oblique 15deg;
}Kopiuj

italic vs oblique: Zawsze preferuj użycie italic, jeśli chcesz uzyskać kursywę. Przeglądarka najpierw poszuka dedykowanej wersji italic czcionki (załadowanej przez @font-face lub systemowej). Jeśli jej nie znajdzie, a użyłeś italic, może spróbować użyć wersji oblique (jeśli jest) lub syntetycznie pochylić wersję normalną. Jeśli użyjesz oblique, przeglądarka pominie szukanie wersji italic i od razu spróbuje użyć wersji oblique lub syntetycznego pochylenia.

Podobnie jak w przypadku font-weight, dostępność prawdziwej kursywy (italic) zależy od tego, czy dana czcionka posiada taki wariant i czy został on poprawnie załadowany (np. przez @font-face z odpowiednim deskryptorem font-style: italic;).

Właściwość font-variant

Właściwość font-variant jest właściwością zbiorczą, ale jej najczęstszym zastosowaniem jest włączanie **kapitalików** za pomocą wartości small-caps.

Najważniejsze wartości dla font-variant (w kontekście kapitalików):

• normal: Wyłącza wszystkie warianty, w tym kapitaliki. Wartość domyślna.
• small-caps: Włącza kapitaliki. Małe litery są zastępowane przez pomniejszone wersje wielkich liter. Jeśli czcionka posiada dedykowane glify dla kapitalików, zostaną one użyte. W przeciwnym razie przeglądarka może spróbować je zasymulować.

h1 {
  /* Nagłówek zapisany normalnie w HTML będzie wyświetlony KAPITALIKAMI */
  font-variant: small-caps;
}

.inicjaly {
  font-variant: small-caps;
  font-weight: bold;
}Kopiuj

<h1>To jest nagłówek</h1> 
<!-- W przeglądarce (z powyższym CSS): TO JEST NAGŁÓWEK (z małymi literami jako pomniejszone wielkie) -->

<p>Autor: <span class="inicjaly">J.K.</span> Rowling</p>
<!-- W przeglądarce: Autor: J.K. Rowling (inicjały jako kapitaliki) -->Kopiuj

Syntetyczne kapitaliki (Faux Small-Caps): Podobnie jak w przypadku pogrubienia, jeśli czcionka nie ma specjalnie zaprojektowanych glifów dla kapitalików, przeglądarka może spróbować je zasymulować, po prostu zmniejszając wielkie litery. Efekt może być mniej estetyczny niż prawdziwe kapitaliki.

Właściwość font-variant może przyjmować również inne, rzadziej używane wartości związane z ligaturami, formami cyfr itp. (np. font-variant-ligatures, font-variant-numeric), ale small-caps jest zdecydowanie najpopularniejszym zastosowaniem.