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