Emsu lietošana, lai mainītu fontu lielumus
Veidojot Web lapu, lielākā daļa speciālistu iesaka izmēru fontus (un faktiski viss) ar relatīvu mērījumu, piemēram, ems, exs, procentiem vai pikseļiem. Tas ir tāpēc, ka jūs patiešām nezināt visus dažādos veidus, kā kāds varētu skatīt jūsu saturu. Un, ja jūs izmantojat absolūto mērvienību (collas, centimetri, milimetri, punkti vai pikas), tas var ietekmēt lapas displeju vai lasāmību dažādās ierīcēs.
Un W3C iesaka izmantot izmērus ems.
Bet cik liels ir em?
Saskaņā ar W3C, em:
"ir vienāds ar elementa" font-size "vērtību, uz kuru tas tiek izmantots, aprēķinātā vērtība. Izņēmums ir tas, kad" em "rodas fonta izmēra īpašumā, tādā gadījumā tas attiecas uz vecāku elementa fonta lielumu. "
Citiem vārdiem sakot, ems nav absolūta lieluma. Viņi ņem to izmēru vērtības, pamatojoties uz to atrašanās vietu. Lielākajai daļai tīmekļa izstrādātāju tas nozīmē, ka tie ir tīmekļa pārlūkprogrammā, tādēļ fonts, kas ir 1em garš, ir tieši tāds pats lielums kā noklusējuma fonta izmērs šai pārlūkprogrammai.
Bet cik garums ir noklusējuma lielums? Nav nekādas iespējas būt pārliecinātiem par 100%, jo klienti savā pārlūkprogrammā var nomainīt noklusējuma fontu lielumu, taču, tā kā lielākā daļa cilvēku neuzskata, ka lielākajai daļai pārlūkprogrammu noklusējuma fonta izmērs ir 16 pikseļi. Tāpēc lielāko daļu laika 1em = 16px .
Padomājiet pikseļos, izmantojiet Ems pasākumam
Kad jūs zināt, ka noklusējuma fonta izmērs ir 16 pikseļi, varat izmantot ems, lai jūsu klienti varētu viegli mainīt lapas izmērus, bet domājat par pikseļiem fontu izmēru dēļ.
Pieņemsim, ka jums ir šāda veida lieluma struktūra:
- 1. virsraksts - 20 pikseļi
- 2. virsraksts - 18 pikseļi
- 3. virsraksts - 16 pikseļi
- Galvenais teksts - 14 pikseļi
- Apakšraksts - 12 pikseļi
- Zemsvītras piezīmes - 10 pikseļi
Jūs tos varētu definēt, izmantojot mērīšanas punktus, bet pēc tam ikviens, kas izmanto IE 6 un 7, nevarēs mainīt jūsu lapu. Tātad jums vajadzētu pārvērst izmērus uz ems, un tas ir tikai jautājums par kādu matemātiku:
- 1. virsraksts - 1.25em (16 x 1.25 = 20)
- 2. virsraksts - 1.125em (16 × 1.125 = 18)
- 3. virsraksts - 1em (1em = 16 pikseļi)
- Galvenais teksts - 0.875em (16 x 0.875 = 14)
- Apakšvirsraksts - 0.75em (16 x 0.75 = 12)
- Zemsvītras piezīmes - 0,625em (16 x 0,625 = 10)
Neaizmirstiet mantojumu!
Bet tas vēl nav viss, lai ems. Otra lieta, kas jums jāatceras, ir tā, ka viņi ņem vecāku lielumu. Tātad, ja jums ir ligzdoti elementi ar dažādu fontu lielumu, jūs varētu nonākt ar fontu, kas ir daudz mazāks vai lielāks nekā jūs sagaidāt.
Piemēram, jums varētu būt šāda stilu lapa:
p {font-size: 0.875em; }
.footnote {font-size: 0.625em; }
Tādējādi fonti būs attiecīgi 14 pikseli un 10 pikseri galvenajam tekstam un zemsvītras piezīmēm. Bet, ja rindkopā ievietojat zemsvītras piezīmi, galu galā varētu būt teksts, kas ir 8,75 pikseļi, nevis 10 pikseļi. Izmēģiniet to pats, ievietojiet dokumentā CSS un šādu HTML:
Šis fonts ir 14 pikseļi vai 0.875 ems augstumā.
Šajā punktā ir zemsvītras piezīme.
Lai gan tas ir tikai zemsvītras piezīme.
Tekstu zemsvītras piezīmes ir grūti nolasīt ar 10 pikseļi, tas ir gandrīz nesalasāms ar 8,75 pikseļiem.
Tātad, kad jūs izmantojat ems, jums ir jābūt ļoti informētam par vecāku objektu izmēriem vai arī savā lappusē nonāksiet ar dažiem nepāra elementiem.