Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

CSS: Własność font-variant

niedziela,

CSS: Własność font-variant

W kaskadowych arkuszach stylów właściwość font-variant jest używana do wybrania alternatywnych stylów fontu w obrębie danej rodziny fontów. Warto zauważyć, że dostępność tych stylów zależy od fontu, który jest używany. Nie wszystkie fonty obsługują wszystkie warianty font-variant. Ponadto font-variant może być również używane w połączeniu z innymi właściwościami, takimi jak font-variant-caps, font-variant-numeric, font-variant-east-asian, aby precyzyjniej kontrolować wygląd tekstu.

Dostępne wartości

  • normal – wartość domyślna, która wskazuje na użycie normalnego fontu bez alternatywnych stylów;
  • small-caps – tekst jest wyświetlany w małych kapitalikach (small caps), oznacza to, że małe litery są przekształcane w kapitaliki, ale są mniejsze niż normalne kapitaliki;
  • all-small-caps – podobnie jak small-caps, ale przekształca także duże litery w małe kapitaliki, tworząc jednolity wygląd;
  • petite-caps – podobne do small-caps, ale zazwyczaj używa jeszcze mniejszych wersji kapitalików;
  • all-petite-caps – przekształca wszystkie litery (zarówno duże, jak i małe) w małe kapitaliki;
  • unicase – specyficzny styl, który łączy duże i małe litery w jednolity sposób;
  • inherit – dziedziczy wartość od elementu nadrzędnego (rodzica);
  • initial – ustawia wartość domyślną, zdefiniowaną w specyfikacji CSS.

Demonstracja

Pierwszym królem Polski był Bolesław I Chrobry, koronowany w 1025 roku.

Przykład

CSS font-variant jest właściwością, która pozwala na kontrolowanie wyglądu tekstu, szczególnie w zakresie używania małych kapitalików (small caps). Oto przykład kodu, który pokazuje, jak można używać tej właściwości:

/* Zastosowanie małych kapitalików */
.small-caps {
    font-variant: small-caps;
}

/* Zastosowanie normalnych liter (bez małych kapitalików) */
.normal {
    font-variant: normal;
}

A oto przykład kodu HTML, który wykorzystuje te klasy CSS:

<p class="small-caps">Tekst napisany małymi kapitalikami.</p>
<p class="normal">Tekst bez małych kapitalików.</p>

W pierwszym akapicie z klasą small-caps tekst zostanie wyświetlony z użyciem małych kapitalików, gdzie wszystkie litery są kapitalikami, ale litery pochodzące z małych liter są mniejsze od normalnych kapitalików. W drugim akapicie tekst jest wyświetlany normalnie, bez małych kapitalików.

Trzy miesiące temu na naszej stronie…

Artykuł: Józef Piłsudski

Józef Piłsudski

Artykuł: GIMP: Zaznaczanie prostokątne i&nbsp;eliptyczne

GIMP: Zaznaczanie prostokątne i eliptyczne

Artykuł: GIMP: Zapisywanie zaznaczenia

GIMP: Zapisywanie zaznaczenia

Artykuł: Symulator sieci komputerowej

Symulator sieci komputerowej

Artykuł: Linux: Polecenie dmidecode

Linux: Polecenie dmidecode

Artykuł: Specyfikacja: Przydatne programy

Specyfikacja: Przydatne programy

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły