Rodziny czcionek i czcionki bezpieczne dla sieci
Ustawią Państwo rodziny czcionek i poznają czcionki, których można bezpiecznie używać we wszystkich przeglądarkach.
Rodziny czcionek i czcionki bezpieczne dla sieci to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 1 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.
Właściwość font-family
Właściwość font-family ustawia krój pisma elementu. Należy podać stos czcionek: rozdzieloną przecinkami listę nazw czcionek, od najbardziej preferowanej do najmniej preferowanej, zakończoną nazwą rodziny ogólnej.
<p>This text renders in the page's body font stack.</p>
Ogólne rodziny czcionek
CSS definiuje pięć ogólnych rodzin używanych jako czcionki zastępcze:
serif— czcionki z ozdobnymi szeryfami (Times, Georgia)sans-serif— proste czcionki bez szeryfów (Arial, Helvetica)monospace— czcionki o stałej szerokości znaków (Courier, Consolas)cursive— czcionki w stylu pisma odręcznegofantasy— ozdobne czcionki graficzne
Czcionki bezpieczne dla sieci
Czcionki bezpieczne dla sieci są preinstalowane praktycznie we wszystkich systemach operacyjnych. Można z nich korzystać bez ładowania zewnętrznego pliku czcionki:
- Bezszeryfowe: Arial, Helvetica, Verdana, Trebuchet MS
- Szeryfowe: Georgia, Times New Roman
- Monospace: Courier New, Consolas
Nazwy czcionek zawierające spacje
Nazwy czcionek zawierające spacje należy ujmować w cudzysłowy:
<p class="serif-example">"Times New Roman", Times, serif</p>
<p class="sans-example">"Open Sans", sans-serif</p>
Najlepsze praktyki dotyczące stosów czcionek
Stos czcionek powinien zawierać:
- preferowaną czcionkę (może nie być zainstalowana)
- jedną lub dwie podobne czcionki zastępcze
- ogólną rodzinę czcionek jako ostateczne rozwiązanie
<p class="font-stack">Georgia → Palatino Linotype → serif fallback</p>
Czcionki interfejsu systemowego
W nowoczesnych projektach często używa się czcionek systemowych — natywnych czcionek interfejsu danego systemu operacyjnego. Zapewnia to natywny wygląd i nie wymaga żadnego pobierania:
<p class="system-ui-text">This uses your OS's native UI font.</p>
Stosy monospace dla kodu
Edytory kodu i terminale wymagają stosu czcionek monospace:
<p>Inline <code>const x = 1;</code> code.</p>
<pre>function hello() {
return "world";
}</pre>
Dziedziczenie font-family
Większość elementów dziedziczy font-family po elemencie nadrzędnym. Niektóre elementy formularzy (<input>, <textarea>) w niektórych przeglądarkach nie dziedziczą tej właściwości domyślnie — należy ustawić ją jawnie:
<input type="text" placeholder="Input" />
<textarea placeholder="Textarea"></textarea>
<select><option>Select</option></select>
<button>Button</button>
Sprawdzanie dostępnych czcionek
Dostępność czcionki systemowej można sprawdzić za pomocą funkcji local() wewnątrz @font-face. Przeglądarki najpierw próbują użyć czcionki lokalnej, a dopiero potem ją pobierają.
<p class="my-font-text">Text using MyFont (local match or fallback)</p>
Podzbiór za pomocą Unicode-Range
Podczas ładowania czcionek należy użyć unicode-range w @font-face, aby ładować tylko potrzebne zakresy znaków. Zmniejsza to rozmiar pobieranych danych w witrynach wielojęzycznych.
<p class="inter-text">Basic Latin text (U+0000–00FF range)</p>
Wprowadzenie do czcionek zmiennych
Czcionki zmienne zawierają całą rodzinę (grubości, szerokości i style) w jednym pliku, korzystając z osi zmienności czcionki. Znacznie zmniejszają liczbę żądań HTTP w projektach bogatych typograficznie.
Szybkie sprawdzenie
Jakiej ogólnej rodziny czcionek należy użyć jako ostatecznej czcionki zastępczej w stosie sans-serif?
Podsumowanie
Właściwość font-family przyjmuje stos czcionek zakończony ogólną rodziną. Czcionki bezpieczne dla sieci działają wszędzie bez ładowania. Stosy czcionek interfejsu systemowego zapewniają natywny wygląd bez dodatkowego kosztu żądań HTTP. Nazwy czcionek zawierające spacje należy zawsze ujmować w cudzysłowy.
Często zadawane pytania
Czy lekcja „Rodziny czcionek i czcionki bezpieczne dla sieci” jest bezpłatna?
Tak — pełny tekst „Rodziny czcionek i czcionki bezpieczne dla sieci” 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 „Rodziny czcionek i czcionki bezpieczne dla sieci”?
Ustawią Państwo rodziny czcionek i poznają czcionki, których można bezpiecznie używać we wszystkich przeglądarkach. Ć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 1 z 4.
Ile czasu zajmuje lekcja „Rodziny czcionek i czcionki bezpieczne dla sieci”?
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