Font-stretch w CSS3

By /

CSS

CSS3 wprowadza wiele nowych funkcji, które pozwalają twórcom stron internetowych na bardziej precyzyjne kontrolowanie wyglądu tekstów na ich stronach. Jedną z takich właściwości jest font-stretch, która umożliwia zmianę szerokości czcionki, bez wpływu na jej wysokość. Właściwość ta może być szczególnie użyteczna w sytuacjach, kiedy chcemy, aby tekst lepiej dopasował się do dostępnej przestrzeni, bez konieczności zmiany rozmiaru czcionki czy jej stylu.

Przykład wykorzystania font-stretch

Poniżej znajduje się prosty przykład kodu HTML z zastosowaniem CSS, który demonstruje użycie font-stretch. W tym przykładzie nie wykorzystujemy JavaScriptu, ponieważ font-stretch jest czysto stylistyczną właściwością i może być zaimplementowana bezpośrednio w CSS.

<!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-stretch w CSS3</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        .normal {
            font-stretch: normal;
        }

        .expanded {
            font-stretch: expanded;
        }

        .condensed {
            font-stretch: condensed;
        }
    </style>
</head>
<body>

    <p class="normal">Tekst z normalną szerokością czcionki.</p>
    <p class="expanded">Tekst z rozszerzoną szerokością czcionki.</p>
    <p class="condensed">Tekst ze zwężoną szerokością czcionki.</p>

</body>
</html>

Dostępne wartości font-stretch

Właściwość font-stretch może przyjąć różne wartości, które pozwalają na dostosowanie szerokości czcionki. Oto niektóre z nich:

  • normal: standardowa szerokość czcionki.
  • semi-condensed: lekko zwężona czcionka.
  • condensed: zwężona czcionka.
  • extra-condensed: bardzo zwężona czcionka.
  • ultra-condensed: najbardziej zwężona czcionka.
  • semi-expanded: lekko rozszerzona czcionka.
  • expanded: rozszerzona czcionka.
  • extra-expanded: bardzo rozszerzona czcionka.
  • ultra-expanded: najbardziej rozszerzona czcionka.

Warto pamiętać, że skuteczność tej właściwości zależy od czcionki, która jest używana. Nie wszystkie czcionki obsługują różne szerokości. Warto więc sprawdzić dokumentację czcionki, aby upewnić się, że wspiera ona właściwość font-stretch.

Podsumowanie

Właściwość font-stretch w CSS3 pozwala na elastyczne dostosowanie szerokości czcionki, co może być bardzo przydatne przy projektowaniu responsywnych stron internetowych. Umożliwia ona twórcom stron lepsze dopasowanie tekstu do dostępnej przestrzeni, poprawiając czytelność i estetykę strony. Jednakże, aby wykorzystać pełen potencjał tej właściwości, ważne jest wybranie czcionek, które wspierają różne szerokości.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video Fullstack w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Powiązane artykuły

Scroll to Top