Gebruik Ems om lettergroottes te verander
Wanneer u 'n webblad bou, beveel die meeste professionele persone aan dat u groottefonts (en trouens alles) met 'n relatiewe mate soos ems, exs, persentasies of pixels. Dit is omdat jy regtig nie al die verskillende maniere ken waarop iemand jou inhoud kan sien nie. En as jy 'n absolute maatstaf (duim, sentimeter, millimeter, punte of picas) gebruik, kan dit die vertoning of leesbaarheid van die bladsy in verskillende toestelle beïnvloed.
En die W3C beveel aan dat jy ems vir groottes gebruik.
Maar hoe groot is 'n em?
Volgens die W3C is 'n em:
"is gelyk aan die berekende waarde van die 'lettergrootte'-eienskap van die element waarop dit gebruik word. Die uitsondering is wanneer' em 'voorkom in die waarde van die' fontgrootte'-eiendom self, in welke geval dit verwys na die lettergrootte van die ouer element. "
Met ander woorde, ems het nie 'n absolute grootte nie. Hulle neem hul grootte waardes gebaseer op waar hulle is. Vir die meeste webontwerpers beteken dit dat hulle in 'n webblaaier is, so 'n font wat 1em lank is, is presies dieselfde grootte as die standaard lettergrootte vir daardie blaaier.
Maar hoe lank is die standaard grootte? Daar is geen manier om 100% seker te wees nie, aangesien kliënte hul standaardlettergrootte in hul blaaiers kan verander, maar aangesien die meeste mense nie kan aanvaar dat die meeste blaaiers 'n standaard fontgrootte van 16px het nie. So die meeste van die tyd 1em = 16px .
Dink in pixels, gebruik Ems vir die maatreël
Sodra jy weet dat die standaard font grootte 16px is, kan jy dan ems gebruik om jou kliënte die grootte van die bladsy maklik te maak, maar dink in pixels vir jou lettergroottes.
Sê jy het 'n grootte struktuur so iets:
- Opskrif 1 - 20px
- Opskrif 2 - 18px
- Opskrif 3 - 16px
- Hoof teks - 14px
- Sub teks - 12px
- Voetnote - 10px
U kan dit op die manier definieer met behulp van pixels vir die meting, maar dan kan enigeen wat IE 6 en 7 gebruik, nie u bladsy goed verander nie. So jy moet die groottes omskakel na ems en dit is net 'n kwessie van wiskunde:
- Opskrif 1 - 1.25em (16 x 1.25 = 20)
- Opskrif 2 - 1.125em (16 × 1.125 = 18)
- Opskrif 3 - 1em (1em = 16px)
- Hoof teks - 0.875em (16 x 0.875 = 14)
- Sub teks - 0.75em (16 x 0.75 = 12)
- Voetnote - 0.625em (16 x 0.625 = 10)
Vergeet nie erfenis nie!
Maar dis nie al wat daar is nie. Die ander ding wat u moet onthou, is dat hulle die grootte van die ouer aanneem. So as jy geneste elemente met verskillende lettergroottes het, kan jy met 'n font veel kleiner of groter as wat jy verwag.
Byvoorbeeld, jy het dalk 'n style soos hierdie:
p {font-size: 0.875em; }
. voetnoot {font-size: 0.625em; }
Dit sal lei tot fonts wat onderskeidelik 14px en 10px vir die hoof teks en die voetnote is. Maar as jy 'n voetnoot in 'n paragraaf sit, kan jy met teks wat 8,75px eerder as 10px is, beland. Probeer dit self, plaas die bostaande CSS en die volgende HTML in 'n dokument:
Hierdie font is 14px of 0.875 cm in hoogte.
Hierdie paragraaf het 'n voetnoot daarin.
Terwyl dit net 'n voetnoot paragraaf is.
Die voetnoot teks is moeilik om te lees teen 10px, dit is byna onleesbaar op 8,75px.
So, as jy ems gebruik, moet jy baie bewus wees van die groottes van die ouer voorwerpe, of jy sal eindig met 'n paar ewe groot grootte elemente op jou bladsy.