4 jednostki CSS, które decydują o skalowaniu czcionki

2026-10-19T18:08:03Z

MikelRide8540: Die Seite wurde neu angelegt: „Najbardziej zawodne są testy polegające na wpisaniu samej nazwy czcionki bez zapasowego stosu. Jeśli krój nie jest dostępny, przeglądarka użyje domyślnego, a ty nie masz żadnej kontroli nad tym, co się wyświetli. Zawsze podawaj co najmniej dwie rodziny — jedną docelową i jedną systemową. Pamiętaj, że kolejność na liście ma znaczenie: pierwsza dostępna wygrywa, a nie ta, która wygląda najlepiej. Warto też unikać nazw potocznych i…“

Najbardziej zawodne są testy polegające na wpisaniu samej nazwy czcionki bez zapasowego stosu. Jeśli krój nie jest dostępny, przeglądarka użyje domyślnego, a ty nie masz żadnej kontroli nad tym, co się wyświetli. Zawsze podawaj co najmniej dwie rodziny — jedną docelową i jedną systemową. Pamiętaj, że kolejność na liście ma znaczenie: pierwsza dostępna wygrywa, a nie ta, która wygląda najlepiej. Warto też unikać nazw potocznych i skrótów, bo nie każdy system je rozpoznaje. Kiedy konkretna wartość ratuje układ, a kiedy go psuje Konkretna wartość, np. flex-basis 200px, daje przewidywalność. Świetnie sprawdza się w kartach produktów, panelach i kolumnach, które mają mieć podobną szerokość. Jeśli chcesz, aby elementy równo się rozkładały, ustaw flex-basis na 0 i pozwól, by flex-grow decydował o podziale. Wtedy treść nie wpływa na proporcje, a układ pozostaje stabilny. Pamiętaj jednak, że sztywne wartości nie uwzględniają długich słów ani obrazków, które mogą rozepchnąć kontener. Warto też sprawdzić, czy plik fontu w ogóle dociera do przeglądarki. W panelu sieciowym odfiltruj żądania typu font i zobacz, czy status odpowiedzi jest poprawny. Częsty błąd to zła ścieżka do pliku albo brak deklaracji formatu — wtedy przeglądarka pobiera zasób, ale go odrzuca i przechodzi do kolejnego kroju. Inny typowy problem to zbyt restrykcyjna polityka bezpieczeństwa, która blokuje wczytywanie fontów z innej domeny. Objawia się to dokładnie tak samo: tekst wygląda inaczej, choć w kodzie wszystko się zgadza. flex-grow działa jak licznik udziałów w wolnej przestrzeni. Jeśli dwa elementy mają flex-grow: 1 i flex-grow: 2, to drugi dostanie dwa razy więcej wolnego miejsca niż pierwszy. Ważne: dzielona jest tylko nadwyżka, a nie cała szerokość kontenera. Gdy elementy mają flex-basis: 100px każde, a kontener ma 400px, wolne 200px zostanie rozdzielone proporcjonalnie do wartości flex-grow. Wartość 0 oznacza, że element nie bierze udziału w podziale. Wartości ujemne są ignorowane, a liczby niecałkowite działają normalnie. Procenty działają podobnie do em, bo również liczą się od rodzica. font-size: 100% to zwykle 16px, a 150% da 24px. W praktyce warto używać ich do ustawienia bazowego rozmiaru na html, a resztę budować w rem. Mieszanie jednostek bez planu prowadzi do sytuacji, w której część interfejsu skaluje się z ustawieniami przeglądarki, a część nie — i całość przestaje być przewidywalna. Ostatnia rzecz: nie ufaj wyłącznie podglądowi na własnym komputerze. System, na którym testujesz, może mieć zainstalowany krój, którego nie ma u odbiorców. Sprawdź stronę na innym urządzeniu lub w środowisku bez dostępu do twoich lokalnych fontów. Dopiero wtedy zobaczysz, czy stos działa zgodnie z założeniem, czy tylko przypadkowo wygląda dobrze. Rozmiar czcionki w CSS można ustawić na kilka sposobów i każdy z nich zachowuje się inaczej przy zmianie ustawień przeglądarki lub rozmiaru okna. Najczęściej używane jednostki to px, em, rem, a obok nich procenty. Zrozumienie, co skaluje się z czym, pozwala uniknąć layoutu, który rozsypuje się u użytkownika powiększającego tekst. Przeglądarka nie zawsze używa tej czcionki, którą wpiszesz jako pierwszą w deklaracji font-family. Gdy plik fontu nie jest dostępny, system nie ma go zainstalowanego albo format nie jest obsługiwany, silnik renderujący po cichu przechodzi do kolejnej pozycji na liście. Problem w tym, że użytkownik zwykle nie widzi różnicy — dopóki nie porówna szerokości znaków albo nie sprawdzi faktycznie użytego kroju. Warto więc wiedzieć, jak to zweryfikować zamiast zgadywać. Typowe błędy, które pogarszają sytuację: zapisywanie tego samego pliku kilka razy pod rząd, wyostrzanie po kompresji, mieszanie formatów bez kontroli jakości, powiększanie obrazu z już widocznymi blokami, a także ustawianie jakości na najniższą możliwą wartość, żeby tylko zmniejszyć rozmiar pliku. Każdy z tych nawyków dokłada artefakty, których nie da się już usunąć. Warto też pamiętać, że krawędzie na jednolitym tle psują się szybciej niż krawędzie na tle bogatym w szczegóły — dlatego kontur na niebie albo ścianie bywa najbardziej widoczny. Sprawdzanie po metrykach i szerokości znaków Drugi sposób nie wymaga zaglądania w narzędzia. Wystarczy porównać wygląd tekstu z wzorcem. Zrób zrzut ekranu i zmierz odległość między skrajnymi punktami dwóch takich samych liter w różnych fragmentach. Jeśli szerokości się różnią, mimo że styl jest ten sam, prawdopodobnie na jednej podstronie font się załadował, a na innej nie. Uwaga na pułapkę: czcionka zastępcza często ma inne proporcje, przez co tekst może wyglądać „prawie tak samo", ale zajmować inną liczbę linii. To szczególnie widać przy dłuższych akapitach i w przyciskach, gdzie nagle pojawia się zawijanie.

Benutzer:MikelRide8540

2026-10-19T18:08:01Z

MikelRide8540: Die Seite wurde neu angelegt: „Miłośnik urządzania mieszkań od kilku lat. Piszę o tym, jak urządzić mieszkanie w bloku bez remontu generalnego. Najchętniej opisuję pomysły, które nie rujnują budżetu.“

Miłośnik urządzania mieszkań od kilku lat. Piszę o tym, jak urządzić mieszkanie w bloku bez remontu generalnego. Najchętniej opisuję pomysły, które nie rujnują budżetu.

Rettungsdienst-Wiki - Benutzerbeiträge [de]

4 jednostki CSS, które decydują o skalowaniu czcionki

Benutzer:MikelRide8540