Korištenje ems za promjenu veličine fonta
Kada gradite web stranicu, većina stručnjaka preporučuje da veličine fontova (i zapravo, sve) s relativnom mjerom kao što su ems, ex, percentages ili pixels. To je zato što stvarno ne znate sve različite načine na koje netko može vidjeti vaš sadržaj. A ako koristite apsolutnu mjeru (inča, centimetara, milimetara, točaka ili pikas), to može utjecati na prikaz ili čitljivost stranice na različitim uređajima.
A W3C preporučuje da koristite EMS za veličine.
Ali kako je velika em?
Prema W3C em:
"jednaka je izračunatoj vrijednosti veličine" font-size "elementa na kojem se koristi. Iznimka je kada se 'em' pojavljuje u vrijednosti samog" font-size "svojstva, u kojem slučaju se odnosi do veličine fonta roditeljskog elementa. "
Drugim riječima, ems nema apsolutnu veličinu. Oni uzimaju svoje veličine vrijednosti na temelju gdje su. Za većinu web dizajnera to znači da su u web pregledniku, tako da je font koji je visok 1em točno iste veličine kao zadana veličina fonta za taj preglednik.
Ali koliko je visina zadana veličina? Nema načina da budete 100% sigurni jer korisnici mogu promijeniti zadanu veličinu fonta u svojim preglednicima, ali budući da većina ljudi ne može pretpostaviti da većina preglednika ima zadanu veličinu fonta od 16px. Tako je većinu vremena 1em = 16px .
Razmislite u pikselima, upotrijebite Ems za mjeru
Kada znate da je zadana veličina slova 16px, tada možete upotrijebiti ems kako biste svojim klijentima omogućili jednostavno promjenu veličine stranice, ali mislite u pikselima za veličine fonta.
Recimo da imate sličnu strukturu ovako:
- Naslov 1 - 20px
- Naslov 2 - 18 piksela
- Naslov 3 - 16px
- Glavni tekst - 14 piksela
- Sub tekst - 12 piksela
- Napomene - 10x
Možete ih definirati na taj način pomoću piksela za mjerenje, ali svatko tko koristi IE 6 i 7 ne bi mogao dobro promijeniti veličinu stranice. Dakle, trebali biste pretvoriti veličine ems i to je samo pitanje nekih matematike:
- Naslov 1 - 1.25em (16 x 1.25 = 20)
- Naslov 2 - 1.125em (16 x 1.125 = 18)
- Naslov 3 - 1em (1em = 16px)
- Glavni tekst - 0,875em (16 x 0,875 = 14)
- Sub text - 0.75em (16 x 0.75 = 12)
- Napomene - 0,625em (16 x 0,625 = 10)
Ne zaboravite nasljedstvo!
Ali to nije sve što postoji. Druga stvar koju trebaš zapamtiti jest da oni uzimaju veličinu roditelja. Dakle, ako imate ugniježđene elemente s različitim veličinama fonta, mogli biste imati font koji je mnogo manji ili veći od očekivanog.
Na primjer, možda imate ovakav stilski list:
p {font-size: 0.875em; }
.footnote {font-size: 0.625em; }
To bi rezultiralo fontovima koji su 14px i 10px za glavni tekst i fusnote. Ali ako stavite fusnotu unutar odlomka, možete završiti tekstom koji je 8,75 piksela, a ne 10 piksela. Pokušajte sami, stavite gornji CSS i sljedeći HTML u dokument:
Ovaj font je 14px ili 0,875 ems u visini.
Ovaj stavak ima fusnotu u njemu.
Iako je ovo samo fusnota.
Tekst fusnote je teško čitati na 10px, gotovo je nečitljiv u 8,75px.
Dakle, kada upotrebljavate EMS, morate biti svjesni veličina roditeljskih objekata ili ćete na kraju završiti s nekim stvarno neparnim elementima na vašoj stranici.