Kun rakennat verkkosivua, useimmat ammattilaiset suosittelevat, että mitoitat fontit (ja itse asiassa kaiken) suhteellisella mitalla, kuten emit, exit, prosentit tai pikselit. Tämä johtuu siitä, ettet todellakaan tiedä kaikkia erilaisia tapoja, joilla joku saattaa tarkastella sisältöäsi. Ja jos käytät absoluuttista mittaa (tuumaa, senttimetriä, millimetriä, pistettä tai picaa), se voi vaikuttaa sivun näyttöön tai luettavuuteen eri laitteissa. Ja W3C suosittelee että käytät ems-kokoja.
Mutta kuinka iso ne ovat?
Mukaan W3C he:
"on yhtä suuri kuin sen elementin font-size-ominaisuuden laskettu arvo, johon sitä käytetään. Poikkeus on, kun 'em' esiintyy itse 'font-size' -ominaisuuden arvossa, jolloin se viittaa pääelementin kirjasinkokoon. "
Toisin sanoen emillä ei ole absoluuttista kokoa. He ottavat koon arvot sijaintinsa mukaan. Useimmille web-suunnittelijat, tämä tarkoittaa, että ne ovat verkkoselaimessa, joten 1em pitkä fontti on täsmälleen sama koko kuin kyseisen selaimen oletusfonttikoko.
Mutta kuinka pitkä oletuskoko on? Ei ole mitään tapaa olla 100% varma, koska asiakkaat voivat muuttaa omaa oletusfontin koko selaimissaan, mutta koska useimmat ihmiset eivät, voit olettaa, että useimpien selainten kirjasinkoko on oletuksena 16 kuvapistettä. Joten suurimman osan ajasta 1em = 16 kuvapistettä.
Ajattele pikseleinä, käytä mittaamiseen ems
Kun tiedät, että kirjasimen oletuskoko on 16 kuvapistettä, voit käyttää ems-tiedostoa, jotta asiakkaasi voivat muuttaa sivun kokoa helposti, mutta ajattele pikseliä kirjasinkokoillesi. Oletetaan, että sinulla on mitoitusrakenne jotain tällaista:
- Otsikko 1 - 20 kuvapistettä
- Otsikko 2 - 18 kuvapistettä
- Otsikko 3 - 16 kuvapistettä
- Pääteksti - 14 kuvapistettä
- Alateksti - 12 kuvapistettä
- Alaviitteet - 10 kuvapistettä
Voit määritellä ne tällä tavalla käyttämällä pikseleitä mittaukseen, mutta kukaan IE 6: ta ja 7: ää käyttävä ei pystyisi muuttamaan sivusi kokoa hyvin. Joten sinun pitäisi muuntaa koot emiksi, ja tämä on vain jonkin matematiikan asia:
- Otsikko 1 - 1,25em (16 x 1,25 = 20)
- Otsikko 2 - 1,125em (16 × 1,125 = 18)
- Otsikko 3 - 1em (1em = 16px)
- Pääteksti - 0,875em (16 x 0,875 = 14)
- Alateksti - 0.75em (16 x 0.75 = 12)
- Alaviitteet - 0,625em (16 x 0,625 = 10)
Älä unohda perintöä!
Mutta siinä ei ole kaikki ems. Toinen asia, joka sinun on muistettava, on se, että he ottavat vanhemman koon. Joten jos sinulla on sisäkkäisiä elementtejä, joiden kirjasinkoko on erilainen, saatat päätyä fonttiin, joka on paljon pienempi tai suurempi kuin odotat.
Sinulla voi olla esimerkiksi tällainen tyylitaulukko:
Tämä johtaisi fontteihin, jotka ovat 14 kuvapistettä ja 10 kuvapistettä päätekstille ja alaviitteet. Mutta jos laitat alaviitteen kappaleen sisälle, saatat päätyä tekstiin, joka on 8,75 kuvapistettä eikä 10 kuvapistettä. Kokeile itse, laita yllä CSS ja seuraava HTML asiakirjaksi:
Joten, kun käytät ems-tiedostoja, sinun on oltava hyvin tietoinen pääobjektien koosta, tai muuten pääset sivulle todella parittoman kokoisiin elementteihin.