Istnieje wiele sposobów dostosowywania rozmiaru czcionki CSS. Znaczna część programów obsługi nadal używa pikseli, ale to nie jest właściwe podejście. Piksel jest bardzo prostą opcją, która nie zawsze jest odpowiednia do dostosowywania układów stron. Rozważ wszystkie istniejące metody zmiany rozmiaru czcionki CSS.

Jaki jest ogólnie "rozmiar czcionki"?

Uważa się, że rozmiar odnosi się do wartości największego znaku określonej czcionki. To nie jest prawda. W rzeczywistości wartość jest osadzona w czcionce, a pomiar jej ręcznie za pomocą linijki jest mało prawdopodobny. Zazwyczaj rozmiar jest nieco większy niż odległość od górnej części dużej litery do dolnej części najmniejszej. Dzieje się tak, aby każda kombinacja znaków pasowała do danej przestrzeni. Ważne jest również określenie parametru "line-height", w przeciwnym razie litery p, q i podobne mogą wykraczać poza granice.

Pikseli

Najpopularniejsza wersja. Instaluje się w następujący sposób: rozmiar czcionki: 16 pikseli; Zaletą pikseli jest tylko jedna rzecz - brak trudności z wielkością. Nic do zliczenia. Jaki rozmiar jest wskazany, będą postacie na ekranie. Wadą jest trudność z adaptacyjnym rozmiarem czcionek CSS. Nie będzie możliwe ustalenie relacji między różnymi rozmiarami. Pośród "pikseli" można przypisać przestarzałe jednostki miary. Należą do nich: pc, cm, mm i pt. Tak, mm to milimetr, cm to centymetr. Pt i pc - punkt typograficzny i szczyt typograficzny. Dlaczego te metody są przestarzałe? Ponieważ nie były "niezależne" - przeglądarkaAutomatycznie policzył wartości w pikselach. W związku z tym problemy były takie same jak w przypadku px. Nawiasem mówiąc, w jednym cm z punktu widzenia przeglądarki zawiera 38px.

Em: wartość zależy od rozmiaru czcionki elementu rodzica

Wszystko jest proste. Załóżmy, że masz element div, dla którego określono rozmiar 16px czcionki. Jest w nim jeszcze jeden div, dla którego CSS ma rozmiar czcionki 2em. Odpowiednio 1em - będzie to 16px (czyli rodzic rozmiar czcionki) i 2em - dwukrotnie więcej niż 32px.

Możesz także ustawić wartość em w elemencie nadrzędnym. W tym przypadku będzie to zależeć od wielkości bazy podanej w treści lub html. Em jest względnym rozmiarem czcionki CSS, która będzie się zwiększać i zmniejszać wraz z rozmiarem znaków elementu nadrzędnego. Jest to wygodne - aby zmienić rozmiar w wielu miejscach, wystarczy zmienić parametry rodziców.

Dla profesjonalistów: ex i ch

Praktycznie nie używane przez zwykłych handlerów i programistów frontendowych. Ex jest wartością znaku "X", a ch jest znakiem "0". Wybrana czcionka może nie mieć takich znaków, ale opcje mogą być nadal używane. Z pewnością nie wiadomo, w których przypadkach najlepiej nadają się takie wymiary. Spróbuj eksperymentować - może będzie lepiej dla ciebie? Należy jednak pamiętać, że ex i ch są jednostkami "warunkowymi", więc dokładne dopasowanie parametrów będzie trudne.

Procent: najbardziej niematerialna opcja

Jak ustawić rozmiar czcionki w CSS jako procent? Wydawać by się mogło, że wszystko jest proste - wystarczy podać żądaną opcję i umieścić za nią symbol "%". Ale oto jestpojawia się ważne pytanie: "Jaki procent tej wielkości zostanie podany?"
W większości przypadków parametr jest obliczany w zależności od wielkości rodziców, ale nie zawsze. Jeśli ustawisz właściwość margin-left, procent zostanie obliczony w zależności od szerokości bloku nadrzędnego. Jeśli ustawisz wysokość linii, procent zostanie przyjęty w zależności od aktualnego rozmiaru czcionki. Ustawianie parametrów w procentach wymaga dokładnych eksperymentów. Uważaj na to urządzenie, ponieważ może łatwo zmienić wygląd twojego układu.

Rem: Prosta i uniwersalna jednostka

Powyżej znajduje się lista wielu sposobów dostosowania rozmiaru czcionki w CSS, ale żadna z nich nie jest wygodna. Aby uprościć pracę, obliczono parametr rem, który jest obliczany w zależności od wielkości znacznika określonego dla html. Jest to łatwiejsze niż się wydaje na pierwszy rzut oka. Na przykład dla znacznika html, który zawijał całą zawartość strony, ustawiasz go w rozmiarze 16-bitowym CSS. W związku z tym 1rem ma teraz 16 pikseli. 2rem ma 32px itd. Możesz użyć dowolnego współczynnika proporcji: 02 rem, 11 rem, 100 rem Przeglądarka dokładnie wyświetli parametry.

W html nie można w ogóle niczego dotknąć, ponieważ same przeglądarki ustawiają określony rozmiar czcionki dla opakowania. Ale dla bardziej ostrożnego ustawienia najlepiej jest przedefiniować wynik. Główną zaletą rem jest to, że możesz łatwo skalować czcionki do określonej lokalizacji bez wpływu na inne elementy. Pamiętaj jednak, że starsze przeglądarki IE poniżej wersji 9) nie obsługują tych danych.

Vw i vh: parametry egzotyczne

Ostatnie jednostkipomiary wykonane dla urządzeń mobilnych. Vw to 1% szerokości okna, z którego użytkownik przegląda twoją witrynę. Vh - 1% jego wysokości. Wartości znaków będą automatycznie skalowane w zależności od ekranu gościa. Aby wybrać odpowiedni rozmiar podczas układania, powiększaj i pomniejszaj rozmiar ekranu.

Podsumujmy

Minęło dużo czasu, ponieważ nie można ustawić rozmiaru czcionek CSS tylko przez px. O wiele wygodniej jest używać rem, vh i vw (szczególnie w przypadku projektowania adaptacyjnego), jak również em. Każda z tych opcji ma swoje zalety i wady, dlatego przed użyciem należy sprawdzić kilka metod. Nowoczesne aparaty często korzystają z rem, ponieważ jest to jeden z najłatwiejszych sposobów na zmianę rozmiaru czcionki. Ma jednak wadę - elementy stają się mniej modularne. Zaleca się przestrzeganie 2 zasad:

jeśli właściwości mają być skalowane na podstawie rozmiaru czcionki, em będzie preferowanym wyborem;

W innych przypadkach zaleca się stosowanie rem.

Em jest często używany do ustawiania wielkości dopełnienia i marginesów. Bądź ostrożny, jeśli określisz w nim wartość znaków dla list, ponieważ z powodu dużych znaków w obudowie mogą być zniekształcone.