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.
