Font-variant w CSS3

By /

CSS

W CSS3 właściwość font-variant pozwala na kontrolę nad wyświetlaniem tekstu, oferując różne opcje formatowania, takie jak małe kapitaliki. Jest to szczególnie przydatne w kontekstach typograficznych, gdzie chcemy nadać tekstowi szczególny charakter lub poprawić jego czytelność.

Przykład wykorzystania font-variant

W poniższym przykładzie pokażemy, jak użyć font-variant do zastosowania małych kapitalików do tekstu. Dołączymy także prosty kod JavaScript, który zmieni styl tekstu po kliknięciu na niego, demonstrując dynamiczną zmianę stylów za pomocą JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład wykorzystania font-variant w CSS3</title>
    <style>
        .small-caps {
            font-variant: small-caps;
        }
    </style>
</head>
<body>

<h1 id="headline" class="small-caps">Przykład Małych Kapitalików</h1>

<script>
    // Pobranie elementu po identyfikatorze
    const headline = document.getElementById('headline');

    // Dodanie nasłuchiwania na kliknięcie, które usunie klasę small-caps
    headline.addEventListener('click', function() {
        this.classList.toggle('small-caps');
    });
</script>

</body>
</html>

W tym przykładzie, styl .small-caps jest początkowo zastosowany do elementu <h1>, który wyświetla tekst w małych kapitalikach. Po kliknięciu na nagłówek, skrypt JavaScript dynamicznie dodaje lub usuwa klasę small-caps, pokazując lub ukrywając efekt małych kapitalików.

Właściwości font-variant

CSS3 rozszerza możliwości właściwości font-variant, wprowadzając więcej wartości i modułów, takich jak:

  • font-variant-caps: kontroluje użycie różnych rodzajów kapitalików.
  • font-variant-numeric: umożliwia kontrolę nad stylami cyfr, takimi jak wyrównanie starych stylów czy ułamki.
  • font-variant-ligatures: pozwala na włączanie lub wyłączanie różnych ligatur w tekście.
  • font-variant-east-asian: umożliwia kontrolę nad renderowaniem wschodnioazjatyckich znaków pisma.

Podsumowanie

Właściwość font-variant w CSS3 oferuje potężne narzędzie do kontroli nad wyglądem tekstu, pozwalając na łatwe zastosowanie różnych efektów typograficznych, takich jak małe kapitaliki, bez konieczności korzystania z dodatkowych fontów. Dzięki możliwości dynamicznej zmiany stylów za pomocą JavaScript, programiści mogą tworzyć interaktywne i estetycznie atrakcyjne strony internetowe, które lepiej komunikują się z użytkownikami.

 

Powiązane artykuły

Scroll to Top