Користење Ems за промена на големината на фонтот
Кога градите веб-страница, повеќето професионалци препорачуваат големината на фонтовите (и всушност, сè) со релативна мерка како ems, exs, проценти или пиксели. Ова е затоа што навистина не ги знаете сите различни начини на кои некој може да ја прикаже вашата содржина. И ако користите апсолутна мерка (инчи, сантиметри, милиметри, точки или пики), тоа може да влијае на екранот или читливоста на страницата во различни уреди.
И W3C препорачува да користите ems за големини.
Но, колку е голем е Ем?
Според W3C на em:
"е еднакво на пресметаната вредност на својството" font-size "на елементот на кој се користи. Исклучок е кога 'em' се појавува во вредноста на самата" font-size ", во кој случај се однесува до големината на фонтот на родителскиот елемент. "
Со други зборови, ЕМС нема апсолутна големина. Тие ги земаат нивните вредности за големината врз основа на тоа каде се. За повеќето веб-дизајнери , ова значи дека тие се наоѓаат во прелистувачот на веб-страници, така што фонтот кој е 1м висок е со иста големина како и стандардната големина на фонтот за тој прелистувач.
Но, колку е високата стандардна големина? Не постои начин да се биде 100% сигурен, бидејќи корисниците можат да ја променат нивната стандардна големина на фонтови во нивните прелистувачи, но бидејќи повеќето луѓе не можат да претпостават дека повеќето прелистувачи имаат стандардна големина на фонт од 16 пиксели. Значи поголемиот дел од времето 1em = 16px .
Размислете за пиксели, користете ЕМС за мерката
Откако ќе знаете дека стандардната големина на фонтот е 16 пиксели, тогаш можете да користите ems за да им дозволите на вашите клиенти лесно да ја променат големината на страницата, но размислете во пиксели за вашите големини на фонтови.
Велат дека имате големината структура нешто како ова:
- Наслов 1 - 20px
- Наслов 2 - 18px
- Наслов 3 - 16px
- Главен текст - 14px
- Под текст - 12px
- Фусноти - 10px
Можете да ги дефинирате на тој начин со користење на пиксели за мерење, но потоа секој кој користи 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)
Не заборавај наследство!
Но, тоа не е сè што постои за да им е. Другата работа што треба да се запомни е тоа што тие ја земаат големината на родителот. Значи, ако имате вгнездени елементи со различни големини на фонтови, можете да завршите со фонт многу помал или поголем отколку што очекувате.
На пример, може да имате таков стил:
p {фонт-големина: 0.875em; }
.footnote {фонт-големина: 0.625em; }
Ова ќе резултира со фонтови што се 14px и 10px за главниот текст и фуснотите, соодветно. Но, ако поставите фуснота во став, може да завршите со текст кој е 8.75 пиксели наместо 10 пиксели. Пробајте го ова сами, ставете го горенаведениот CSS и следниот HTML во документ:
Овој фонт е 14px или 0.875 ems во висина.
Овој став има фуснота во неа.
Иако ова е само став од фуснотата.
Текстот за фусноти е тежок за читање на 10 пиксели, речиси нечитлив на 8,75 пиксели.
Значи, кога користите ems, треба да бидете многу свесни за големината на родителските објекти, или ќе завршите со некои навистина чудни големи елементи на вашата страница.