Rozmiar, grubość i styl czcionki
Ustawią Państwo rozmiar tekstu za pomocą font-size, grubość za pomocą font-weight, a styl za pomocą font-style.
Rozmiar, grubość i styl czcionki to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
font-size
font-size ustawia wysokość glifów. Akceptuje dowolną jednostkę długości. Zaleca się używanie rem w skalowalnej i dostępnej typografii.
<h1>Heading (2.5rem)</h1>
<p>Body text (1rem)</p>
<small>Fine print (0.75rem)</small>
Rozmiary czcionki określane słowami kluczowymi
CSS udostępnia także bezwzględne rozmiary określane słowami kluczowymi (od xx-small do xx-large) oraz względne słowa kluczowe (smaller, larger) odnoszące się do rozmiaru czcionki elementu nadrzędnego.
<p class="note">Smaller note text</p>
<p class="big">Extra large text</p>
font-weight
font-weight ustawia grubość tekstu. Należy używać wartości liczbowych (100–900, co 100) lub słów kluczowych:
<p class="thin">Thin weight (100)</p>
<p>Normal body weight (400) with <strong>bold strong text (700)</strong></p>
<p class="heavy">Heavy weight (900)</p>
font-weight i czcionki zmienne
W przypadku czcionek zmiennych prawidłowa jest dowolna całkowita wartość grubości (np. font-weight: 550), a czcionka interpoluje wartości między zdefiniowanymi osiami. Zapewnia to precyzyjną kontrolę typografii.
font-style
font-style steruje wyświetlaniem tekstu pochyłego i ukośnego:
<p>This has <em>italic emphasis</em> inline.</p>
<p class="normal">Normal style text</p>
<p class="oblique">Oblique 20deg text</p>
font-variant
font-variant włącza funkcje typograficzne, takie jak kapitaliki:
<p>The <abbr title="Cascading Style Sheets">CSS</abbr> abbreviation uses small-caps.</p>
Skrótowa właściwość font
Skrótowa właściwość font łączy styl, wariant, grubość, rozmiar, wysokość wiersza i rodzinę czcionki:
<p>Shorthand font: italic bold 1.1rem/1.6 Roboto.</p>
Responsywne skalowanie rozmiaru czcionki
Użyj clamp(), aby utworzyć płynną typografię, która stopniowo skaluje się między rozmiarem minimalnym a maksymalnym:
<h1>Resize the window — this heading scales fluidly.</h1>
line-height a czytelność
line-height ustawia odstępy pionowe między wierszami. Zalecana jest wartość bez jednostki (np. 1.5) — skaluje się ona wraz z rozmiarem czcionki elementów potomnych.
<h1>Tight Heading Line Height</h1>
<p>Body copy with relaxed 1.5 line-height wraps across multiple lines for comfortable reading, demonstrating the effect of the line-height property on paragraph text blocks.</p>
letter-spacing i word-spacing
letter-spacing dodaje odstępy między znakami, a word-spacing — między słowami. Należy używać jednostek em, aby odstępy skalowały się wraz z rozmiarem czcionki.
<h2 class="heading">Spaced Out Heading Text</h2>
Dostępne rozmiary czcionki
Nigdy nie ustawiaj font-size w px dla elementu html ani body. Nadpisuje to preferencję rozmiaru czcionki ustawioną przez użytkownika w przeglądarce. Zamiast tego używaj jednostek rem opartych na domyślnym rozmiarze przeglądarki.
Szybkie sprawdzenie
Jaka liczbowa wartość font-weight odpowiada słowu kluczowemu bold?
Podsumowanie
Używaj rem dla font-size, aby respektować preferencje użytkownika. font-weight akceptuje wartości od 100 do 900 lub słowa kluczowe. Skrótowa właściwość font łączy wiele właściwości. Używaj clamp() do tworzenia płynnej typografii oraz wartości line-height bez jednostki, aby zachować spójne odstępy.
Często zadawane pytania
Czy lekcja „Rozmiar, grubość i styl czcionki” jest bezpłatna?
Tak — pełny tekst „Rozmiar, grubość i styl czcionki” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Rozmiar, grubość i styl czcionki”?
Ustawią Państwo rozmiar tekstu za pomocą font-size, grubość za pomocą font-weight, a styl za pomocą font-style. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Rozmiar, grubość i styl czcionki”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?
Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Rodziny czcionek i czcionki bezpieczne dla sieci
- Rozmiar, grubość i styl czcionki
- Wyrównanie, dekorowanie i odstępy tekstu
- Google Fonts i @font-face