Podczas budowania strony internetowej większość profesjonalistów zaleca stosowanie czcionek o rozmiarze (a właściwie wszystkiego) ze względną miarą, np. Ems, exs, procenty lub piksele. Dzieje się tak dlatego, że naprawdę nie znasz wszystkich sposobów, w jakie ktoś może wyświetlać Twoje treści. A jeśli użyjesz bezwzględnej miary (cale, centymetry, milimetry, punkty lub piki), może to wpłynąć na wyświetlanie lub czytelność strony na różnych urządzeniach. A W3C zaleca używanie ems dla rozmiarów.
Ale jak duży jest Em?
Według W3C an em:
"jest równy wyliczonej wartości właściwości" font-size "elementu, w którym jest używany. Wyjątkiem jest sytuacja, gdy" em "występuje w wartości samej właściwości" font-size ", w którym to przypadku odnosi się do do rozmiaru czcionki elementu nadrzędnego. "
Innymi słowy, ems nie mają bezwzględnego rozmiaru. Przyjmują wartości wielkości w zależności od tego, gdzie się znajdują. W przypadku większości projektantów stron internetowych oznacza to, że są one w przeglądarce internetowej, więc czcionka o wysokości 1em jest dokładnie tego samego rozmiaru, co domyślny rozmiar czcionki dla tej przeglądarki.
Ale jak duży jest domyślny rozmiar? Nie ma sposobu, aby być w 100% pewnym, ponieważ klienci mogą zmienić domyślny rozmiar czcionki w swoich przeglądarkach, ale ponieważ większość ludzi nie może założyć, że większość przeglądarek ma domyślny rozmiar czcionki 16 pikseli. Więc przez większość czasu 1em = 16 pikseli.
Myśl w pikselach, użyj Ems do pomiaru
Gdy wiesz, że domyślny rozmiar czcionki to 16 pikseli, możesz użyć ems, aby umożliwić Twoim klientom łatwą zmianę rozmiaru strony, ale myślcie w pikselach o rozmiarach czcionki. Powiedzmy, że masz strukturę rozmiarów podobną do tej:
- Nagłówek 1 - 20 pikseli
- Nagłówek 2 - 18 pikseli
- Nagłówek 3 - 16 pikseli
- Tekst główny - 14 pikseli
- Pod tekstem - 12 pikseli
- Przypisy - 10 pikseli
Można je zdefiniować w ten sposób za pomocą pikseli do pomiaru, ale wtedy każdy, kto używa IE 6 i 7, nie będzie w stanie odpowiednio zmienić rozmiaru strony. Więc powinieneś przekonwertować rozmiary na ems, a to tylko kwestia matematyki:
- Nagłówek 1 - 1,25em (16 x 1,25 = 20)
- Nagłówek 2 - 1.125em (16 × 1,125 = 18)
- Nagłówek 3 - 1em (1em = 16 pikseli)
- Tekst główny - 0.875em (16 x 0.875 = 14)
- Pod tekst - 0,75em (16 x 0,75 = 12)
- Przypisy - 0,625em (16 x 0,625 = 10)
Nie zapomnij o dziedziczeniu!
Ale to nie wszystko, co należy do ems. Inną rzeczą, o której musisz pamiętać, jest to, że przybierają rozmiary rodziców. Więc jeśli masz zagnieżdżone elementy o różnych rozmiarach czcionek, możesz otrzymać czcionkę o wiele mniejszą lub większą niż oczekujesz.
Na przykład możesz mieć arkusz stylów podobny do tego:
p {rozmiar-czcionki: 0.875em; }.footnote {rozmiar-czcionki: 0.625em; }
To spowoduje czcionki o wielkości 14 i 10 pikseli dla tekstu głównego i przypisów. Ale jeśli umieścisz przypis w akapicie, możesz otrzymać tekst o metodzie 8,75px zamiast 10px. Spróbuj sam, umieść powyższy CSS i następujący kod HTML w dokumencie:
Ta czcionka ma 14px lub 0,875 ems wysokości.W tym akapicie znajduje się przypis.Chociaż jest to tylko akapit przypisu.
Tekst przypisu jest trudny do odczytania przy 10px, jest prawie nieczytelny przy 8,75px.
Tak więc, kiedy używasz ems, musisz być bardzo świadomy rozmiarów obiektów nadrzędnych, lub skończysz z naprawdę dziwnymi rozmiarami elementów na twojej stronie.
