Jak korzystać z czcionek w CSS3

By /

Html CSS

CSS3 oferuje rozbudowane możliwości kontroli nad czcionkami na stronach internetowych, co pozwala twórcom na bardziej precyzyjne i kreatywne projektowanie tekstów. Od podstawowego określenia rodziny czcionek, przez ich rozmiar, aż po zaawansowane funkcje jak font loading czy użycie czcionek niestandardowych z zasobów zewnętrznych – wszystko to jest dostępne w CSS3.

Podstawowe właściwości czcionek:

  • font-family: Określa rodzaj czcionki dla tekstu.
  • font-size: Definiuje rozmiar czcionki.
  • font-weight: Kontroluje grubość czcionki.
  • font-style: Pozwala na ustawienie tekstu na kursywę.

Zaawansowane funkcje:

  • @font-face: Umożliwia korzystanie z niestandardowych czcionek, definiując ścieżkę do pliku z czcionką oraz jej nazwę.
  • font-loading API: Pozwala na kontrolowanie ładowania czcionek w przeglądarkach obsługujących JavaScript.

Przykład użycia czcionek w CSS3

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Korzystanie z czcionek w CSS3</title>
    <style>
        @font-face {
            font-family: 'MyCustomFont';
            src: url('mycustomfont.woff') format('woff'); 
                  /* Ścieżka do pliku z czcionką */
        }
        
        body {
            font-family: Arial, sans-serif; 
                         /* Domyślna rodzina czcionek */
        }
        
        .custom-font {
            font-family: 'MyCustomFont', Arial, sans-serif; 
                        /* Użycie czcionki niestandardowej */
            font-size: 20px;
            font-weight: bold;
        }
        
        .italic-text {
            font-style: italic;
        }
    </style>
</head>
<body>
    <p>Standardowy tekst na stronie.</p>
    <p class="custom-font">Tekst z użyciem czcionki niestandardowej.</p>
    <p class="italic-text">Tekst w stylu kursywy.</p>
</body>
</html>

Podsumowanie

Korzystanie z czcionek w CSS3 umożliwia twórcom stron nie tylko większą kontrolę nad prezentacją tekstu, ale również otwiera drzwi do wykorzystania niestandardowych czcionek, co może znacząco wpłynąć na wizualną identyfikację strony. Ważne jest jednak, aby pamiętać o optymalizacji ładowania czcionek, szczególnie w kontekście szybkości działania strony oraz dostępności. Wybór i stosowanie czcionek powinny być zawsze przemyślane i dostosowane do potrzeb użytkowników oraz celów strony.

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

 

Powiązane artykuły

Scroll to Top