Rozmiary czcionek CSS

Istnieje wiele sposobów dostosowywania rozmiaru czcionki CSS. Znaczna część projektantów stron internetowych nadal używa pikseli, ale to nie jest właściwe podejście. Pixel jest zbyt prostą opcją, która nie zawsze jest odpowiednia do układu responsywnych stron. Rozważ wszystkie istniejące metody zmiany rozmiaru czcionki CSS.

Co to jest "rozmiar czcionki"?

Istnieje opinia, że ​​rozmiar oznacza rozmiar największego znaku określonej czcionki. Tak nie jest. W rzeczywistości wartość jest wbudowana w czcionkę i jest mało prawdopodobne, aby była w stanie zmierzyć ją ręcznie za pomocą linijki. Zwykle rozmiar jest nieco większy niż odległość od wierzchołka największej litery na dół najmniejszej. Odbywa się to w celu dopasowania dowolnej kombinacji znaków w danej przestrzeni. Ważne jest również określenie parametru "line-height", w przeciwnym razie litery p, q i podobne mogą wykraczać poza nie.

Piksele

Najpopularniejsza opcja. Zainstalowany w następujący sposób:

rozmiar czcionki: 16 pikseli;

Zaletą pikseli jest tylko jeden - bez trudności z wartością. Nic do zliczenia. Jaki rozmiar jest określony, a takie będą znaki na ekranie. Wadą jest trudność z responsywnym rozmiarem czcionki CSS. Nie będzie możliwe ustalenie proporcji między różnymi rozmiarami.

Liczba "pikseli" może być przypisana do przestarzałych jednostek. Należą do nich: pc, cm, mm i pt. Tak więc, mm jest milimetr, cm jest centymetr. Pt i pc - szczyt typografii i typografii. Dlaczego te metody są przestarzałe? Ponieważ nie były "niezależne" - przeglądarka automatycznie przeliczyła 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 nadrzędnego

To proste. Załóżmy, że masz element div, dla którego rozmiar czcionki ustawiony jest na 16 pikseli. Zawiera inny element div, dla którego rozmiar czcionki CSS jest ustawiony na 2em. Odpowiednio, 1em będzie 16px (tj. Rozmiar czcionki elementu nadrzędnego), a 2em będzie dwa razy większy, tj. 32px.

W elemencie nadrzędnym można również ustawić wartość w em. W takim przypadku będzie zależeć od rozmiaru podstawowego określonego 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ć wartość w wielu miejscach, wystarczy zmienić parametry rodzica.

Dla profesjonalistów: ex i ch

Praktycznie nie używane przez zwykłych projektantów i programistów frontendowych. Ex jest wartością symbolu "X", a ch jest symbolem "0". Mogą nie być takie znaki w wybranej czcionce, ale parametry mogą być nadal używane. Nie wiadomo, w niektórych przypadkach, w których najlepiej pasują takie wymiary. Spróbuj eksperymentować - może będzie ci wygodniej? Należy jednak pamiętać, że ex i ch są jednostkami "warunkowymi", więc dokładne dostrojenie parametrów będzie trudne.

Odsetki: najbardziej myląca opcja

Jak ustawić rozmiar czcionki w CSS jako procent? Wydawałoby się, że wszystko jest proste - wystarczy podać żądany parametr i umieścić za nim symbol "%". Ale tu pojawia się ważne pytanie: "Jaki będzie procent danego rozmiaru?"

W większości przypadków parametr jest obliczany w zależności od wielkości elementu nadrzędnego, 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 ostrożnego eksperymentowania. Bądź ostrożny z tą jednostką miary, ponieważ może łatwo zmienić wygląd twojej składu.

Rem: prosta i wszechstronna jednostka

Powyżej jest wiele sposobów dostosowywania rozmiarów czcionek w CSS, ale żaden z nich nie jest naprawdę wygodny. Aby uprościć pracę, wynaleziono parametr rem, który jest obliczany w zależności od wartości podanej dla znacznika html.

Jest to łatwiejsze niż się wydaje na pierwszy rzut oka. Na przykład dla znacznika html, w którym zawijana jest cała treść strony, ustawiasz rozmiar 16px dla CSS. W związku z tym 1rem ma teraz 16 pikseli. 2rem ma 32px itp. Można użyć dowolnych proporcji: 0.2rem, 1.1rem, 100rem ... Przeglądarka dokładnie przeliczy parametry.

W html nie można w ogóle niczego dotknąć, ponieważ same przeglądarki ustawiają określony rozmiar czcionki dla opakowania. Jednak w celu dokładniejszego dostosowania lepiej jest przedefiniować wskaźnik. Główną zaletą rem jest to, że możesz łatwo skalować czcionki w określonym miejscu bez wpływu na inne elementy. Należy jednak pamiętać, że starsze przeglądarki (IE poniżej wersji 9) nie obsługują tego wskaźnika.

Vw i vh: opcje egzotyczne

Najnowsze jednostki miary stworzone dla urządzeń mobilnych. Vw to 1% szerokości okna, w którym użytkownik przegląda twoją witrynę. Vh - 1% jego wysokości. Rozmiar znaków zostanie automatycznie przeskalowany w zależności od ekranu urządzenia odwiedzającego. Aby wybrać odpowiedni rozmiar podczas układania, zwiększ i zmniejsz rozmiar ekranu.

Podsumowując

Od dawna nie można było ustawić rozmiaru czcionek CSS tylko w px. O wiele wygodniej jest używać rem, vh i vw (szczególnie z responsywnym designem), jak również em. Każda z tych opcji ma swoje zalety i wady, dlatego przed użyciem sprawdź kilka metod. Współcześni projektanci stron internetowych często używają rem, ponieważ jest to jeden z najprostszych sposobów na zmianę rozmiaru czcionki. Ma jednak wadę - elementy stają się mniej modularne.

Zaleca się przestrzeganie dwóch zasad:

• jeśli właściwości muszą być skalowane w stosunku do rozmiaru czcionki, em jest najlepszym wyborem;
• w innych przypadkach zalecany jest 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 rozmiar znaków dla list, ponieważ ze względu na duże zagnieżdżenie znaki mogą być nieczytelne.