Когато изграждате уеб страница, повечето професионалисти препоръчват да оразмерявате шрифтовете (и всъщност всичко) с относителна мярка като ems, exs, проценти или пиксели. Това е така, защото наистина не знаете всички различни начини някой да разглежда съдържанието ви. И ако използвате абсолютна мярка (инчове, сантиметри, милиметри, точки или пики), това може да повлияе на показването или четливостта на страницата на различни устройства. И W3C препоръчва че използвате ems за размери.
Но колко голяма е тя?
Според W3C ем:
"е равно на изчислената стойност на свойството 'font-size' на елемента, върху който се използва. Изключението е, когато 'em' възниква в стойността на самото свойство 'font-size', като в този случай се отнася до размера на шрифта на родителския елемент. "
С други думи, ems нямат абсолютен размер. Те приемат своите стойности на размера в зависимост от това къде се намират. За повечето уеб дизайнери, това означава, че те са в уеб браузър, така че шрифтът, който е висок 1em, е точно същия размер като размера на шрифта по подразбиране за този браузър.
Но колко висок е размерът по подразбиране? Няма начин да бъдете 100% сигурни, тъй като клиентите могат да променят своите размер на шрифта по подразбиране в техните браузъри, но тъй като повечето хора не могат, можете да предположите, че повечето браузъри имат размер на шрифта по подразбиране 16px. Така че през повечето време 1em = 16px.
Мислете в пиксели, използвайте ems за мярката
След като разберете, че размерът на шрифта по подразбиране е 16px, след това можете да използвате ems, за да позволите на клиентите си лесно да преоразмеряват страницата, но да помислите в пиксели за вашите размери на шрифта. Да кажем, че имате структура за оразмеряване нещо подобно:
- Заглавие 1 - 20 пиксела
- Заглавие 2 - 18 пиксела
- Заглавие 3 - 16 пиксела
- Основен текст - 14px
- Подтекст - 12 пиксела
- Бележки под линия - 10 пиксела
Можете да ги определите по този начин, като използвате пиксели за измерване, но тогава всеки, който използва IE 6 и 7, няма да може да преоразмери добре вашата страница. Така че трябва да конвертирате размерите в ems и това е само въпрос на някаква математика:
- Заглавие 1 - 1.25em (16 x 1.25 = 20)
- Заглавие 2 - 1.125em (16 × 1.125 = 18)
- Заглавие 3 - 1em (1em = 16px)
- Основен текст - 0.875em (16 x 0.875 = 14)
- Подтекст - 0.75em (16 x 0.75 = 12)
- Бележки под линия - 0.625em (16 x 0.625 = 10)
Не забравяйте наследството!
Но това не е всичко, което има за ems. Другото нещо, което трябва да запомните, е, че те приемат размера на родителя. Така че, ако имате вложени елементи с различни размери на шрифта, може да получите шрифт, много по-малък или по-голям, отколкото очаквате.
Например, може да имате лист със стилове като този:
Това би довело до шрифтове съответно 14px и 10px за основния текст и бележките под линия. Но ако поставите бележка под линия в параграф, може да получите текст с размер 8,75 пиксела, а не 10 пиксела. Опитайте сами, сложете горното CSS и следния HTML в документ:
Така че, когато използвате ems, трябва да сте наясно с размерите на родителските обекти, или в крайна сметка ще получите някои наистина странни елементи на вашата страница.