Emsi kasutamine fontide suuruste muutmiseks
Veebilehe ülesehitamisel soovitab enamik spetsialiste, et suvalised mõõdud (nt ems, exs, protsendid või pikslid) kasutavad teie suuruse fonte (ja tegelikult kõike). Seda seetõttu, et te ei tunne kõiki erinevaid võimalusi oma sisu vaatamiseks. Ja kui kasutate absoluutset mõõdet (tolli, sentimeetri, millimeetri, punktide või pica), võib see mõjutada lehe kuvamist või loetavust erinevates seadmetes.
Ja W3C soovitab kasutada eme suuruste jaoks.
Kuid kuidas Big on Em?
W3C sõnul on nad:
"on võrdne selle elemendi" font-size "väärtusega, mille alusel seda kasutatakse, arvutatud väärtusest. Erandiks on siis, kui" em "esineb omaduse" font-size "väärtuses, mille puhul see viitab lähteelemendi fondi suurusele. "
Teisisõnu, emsil puudub absoluutne suurus. Nad võtavad oma suuruse väärtused vastavalt sellele, kus nad asuvad. Enamiku veebidisainerite puhul tähendab see seda, et need on veebibrauseris, nii et fondi suurus 1em pikk on täpselt sama suur kui selle brauseri vaikefraasi suurus.
Kuid kui suur on vaikimisi suurus? Ei ole võimalust olla kindel 100%, kuna kliendid saavad oma brauseris vaikimisi fondi suuruse muuta, kuid kuna enamik inimesi ei saa eeldada, et enamikul brauseritel on vaikepilt 16 pikslit. Nii et enamik ajast 1em = 16px .
Mõelge pikslitesse, kasutage mõõtmiseks Emsit
Kui teate, et vaikimisi on kirjasuurus 16 pikslit, saate seejärel kasutada ems-i, et võimaldada oma klientidel hõlpsalt lehekülje suurust muuta, kuid mõtle pikslitesse oma font suurusele.
Ütle, et teil on selline suuruse struktuur:
- Pealkiri 1 - 20 pikslit
- Pealkiri 2 - 18 pikslit
- Pealkiri 3 - 16 pikslit
- Peamine tekst - 14px
- Alamtekst - 12px
- Märkused - 10 pikslit
Mõõdetavate pikslite abil saate neid määratleda nii, et pikslit mõõdaks, kuid siis, kui kasutate IE 6 ja 7, ei saaks teie lehte korralikult muuta. Nii et sa peaksid teisendama suurused emsile ja see on lihtsalt mõne matemaatika küsimus:
- Pealkiri 1 - 1,25em (16 x 1,25 = 20)
- Pealkiri 2 - 1,125em (16 × 1,125 = 18)
- Pealkiri 3 - 1em (1em = 16px)
- Peamine tekst - 0,875em (16 x 0,875 = 14)
- Alamtekst - 0,75em (16 x 0,75 = 12)
- Märkused - 0,625em (16 x 0,625 = 10)
Ärge unustage pärimist!
Aga see pole veel kõik, et ems. Teine asi, mida peate meeles pidama, on see, et nad võtavad vanema suuruse. Nii et kui teil on erineva suurusega kirjasuuruses olevaid elemente, võite jõuda fondi palju väiksema või suurema väärtusega kui ootate.
Näiteks võib teil olla selline stiilileht:
p {font-size: 0.875em; }
.footnote {font-size: 0.625em; }
Selle tulemuseks oleksid fonte, mis on vastavalt põhitekstile ja joonealustele märkustele 14 pikslit ja 10 pikslit. Kuid kui paned lõikele sisse joonealuse märkuse, võiksite lõpuks teksti pigem 8,75px kui 10px. Proovige seda ise, pange see eespool CSS-i ja järgmine HTML-i dokumenti:
See font on pikkusega 14 pikslit või 0,875 ee.
Selles lõigus on joonealune märkus.
Kuigi see on vaid joonealune märkus.
Alljärgnev tekst on raske lugeda 10 pikslit, see on peaaegu loetamatuks 8,75 pikslit.
Seega, kui kasutate emsi, peate olema väga teadlik emaettevõtete suurusest või jõudma oma lehe mõne väga tüübi suurusega elemendi juurde.