Która czcionka naprawdę się renderuje i jak to wyłapać
W kontekście formularzy i baz danych etykieta jest przypisana do jednego pola. Możesz jednak stworzyć etykietę, która wizualnie obejmuje kilka pól, jeśli połączysz je w grupę. Na przykład w HTML opakowujesz kilka inputów w jeden i dodajesz . Wtedy napis „Adres dostawy" staje się wspólną etykietą dla ulicy, kodu i miasta. Uwaga: to nie znaczy, że każde z tych pól ma tę samą etykietę. Dla czytników ekranu i walidacji każde pole nadal potrzebuje własnej etykiety. Wspólny nagłówek to tylko kontekst, a nie zamiennik.
Najprostsza metoda to inspekcja elementu. Otwórz narzędzia deweloperskie, kliknij prawym przyciskiem na tekst i wybierz opcję badania elementu. W zakładce stylów znajdź regułę font-family. Przeglądarka pokazuje tam listę, ale nie wskazuje aktywnej pozycji. W panelu „Computed" (obliczone) znajdziesz pole font-family z wyliczoną wartością — to zwykle cały stos, a nie pojedyncza nazwa. Dopiero w narzędziu „Rendering" (renderowanie) w nowszych przeglądarkach widać „Fonts used" albo podświetlenie czcionek, które faktycznie zostały użyte do wyświetlenia tekstu.
Kiedy klasa wygrywa z identyfikator
Etykieta to nie tylko napis na wierzchu. W systemach etykietowania, w druku i w logistyce słowo „label" oznacza zwykle jeden znacznik, który może być przypisany do jednego rekordu, jednego pola lub jednego elementu. Gdy pojawia się pytanie, czy jedna etykieta może obejmować kilka pól naraz, odpowiedź brzmi: to zależy od tego, co rozumiesz przez „pole". W praktyce najczęstszy błąd polega na mieszaniu dwóch rzeczy: etykiety jako nośnika danych (np. wydruk z kodem) oraz etykiety jako etykiety tekstowej w interfejsie, która opisuje pole formularza. To dwa różne światy i rządzą się innymi zasadami.
Gdy elementy mają różną zawartość, flex-basis w procentach bywa mylące, bo nie gwarantuje równej szerokości, jeśli flex-shrink i flex-grow są ustawione inaczej. Domyślne flex-shrink: 1 pozwala elementom się kurczyć poniżej basis, gdy brakuje miejsca. Jeśli chcesz sztywnego podziału, ustaw flex-shrink: 0. I ostatnia rzecz: procenty w flex-basis nie działają względem rozmiaru samego elementu ani względem sąsiadów — tylko względem rodzica. Testuj układ przy różnych szerokościach okna, bo to najszybciej pokazuje, czy procenty faktycznie odnoszą się do tego, czego oczekujesz.
Najpewniejszym sposobem pozostaje połączenie obserwacji z narzędziami: sprawdź computed style, zajrzyj w panel renderowania i wykonaj test szerokości znaku. Jeśli wynik jest niejasny, wymuś pojedynczą czcionkę w osobnym pliku testowym i porównaj z docelowym stosem. To daje odpowiedź, która czcionka faktycznie się wyświetla, bez zgadywania.
Domyślne zachowanie kontenera flex to układ jednoliniowy. Wszystkie elementy dziecięce ustawiają się w jednym rzędzie, a gdy brakuje miejsca, kurczą się do granic możliwości. Wystarczy jednak dodać właściwość flex-wrap: wrap, żeby zamiast ściskać elementy, przenosić je do kolejnych linii. To jedno słowo zmienia sposób działania całego układu i najczęściej rozwiązuje problem, który próbuje się naprawiać na siłę przez zmniejszanie szerokości czy marginesów.
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.
Przeglądarka nie mówi wprost, którą czcionkę wybrała ze stosu. Kaskada font-family działa po cichu: jeśli pierwsza pozycja jest niedostępna, system sięga po następną, a gdy żadna nie pasuje, używa domyślnej. Aby to sprawdzić, trzeba zajrzeć w narzędzia deweloperskie albo porównać wygląd tekstu z próbkami.
Typowe błędy to: tworzenie jednej etykiety dla całej grupy pól bez rozdzielenia ich w drukarce, używanie tego samego identyfikatora dla wielu rekordów oraz ignorowanie ograniczeń nośnika. Jeśli etykieta ma obejmować kilka pól, musisz zadbać o separator, kolejność i format. W praktyce sprawdza się szablon, w którym każde pole ma stałą pozycję, a puste wartości są pomijane. Dzięki temu etykieta jest czytelna i nie wprowadza w błąd. Pamiętaj też, że niektóre systemy nie pozwalają na łączenie pól z różnych tabel bez dodatkowej konfiguracji.
Jak to zrobić poprawnie w praktyce Jeśli pracujesz z systemem etykiet, najpierw ustal, czy etykieta ma być przypisana do jednego rekordu, czy do wielu. W większości systemów ERP i WMS etykieta jest przypisana do jednego obiektu: jednej palety, jednego kartonu, jednej sztuki. Możesz jednak wydrukować etykietę zbiorczą, która zawiera dane z kilku pól, np. nazwę produktu, numer partii i datę. To nadal jedna etykieta, ale zawiera wiele informacji. Problem pojawia się, gdy próbujesz przypisać tę samą etykietę do kilku różnych rekordów jednocześnie. Wtedy system może nadpisać dane, zgubić relacje albo wygenerować błędne wydruki.