Оразмеряване на шрифтове в CSS
Определяне на единица за измерване на размера нашия текст може да бъде тема на разгорещени дебати, дори и в този ден и година. За съжаление, все още има различни плюсове и минуси, които правят различните техники по-малко желани. Всичко се свежда до това да изберем най-желаната от най-нежеланите.
Съществуват две основни техники, които се възхваляват:
- Оразмеряване с PX
- Оразмеряване с EM
Нека да разгледаме тези два подхода, преди да разберем за магическия трети начин.
Оразмеряване с px
В ранните дни на интернет, ние използвахме пиксела за оразмеряване на нашия текст. Той е надежден и
последователен. За съжаление, потребителите на Internet Explorer дори в IE9 нямат способността
да променят размера на текст с помощта на функцията на браузъра за увеличаване или намаляване на
размера на шрифта. За тези, които са загрижени за използваемостта на сайта си, това може да е
голям проблем. Новите версии на IE включват мащабиране, което увеличава размера на всичко на
страницата - функция, която е на разположение в повечето други основни браузъри,също.
Това е спомогнало за смекчаване на проблема до известна степен.
Какво друго може да се направи?
Оразмеряване с em
Цялата тази неспособност да се променя размера на текста в IE е постоянно чувство на неудовлетвореност.
За да се отървем от това, ние можем да ги използваме EM единици. Статията на Ричард Rutter,
How to size text using ems,
е може би първата която говори за този подход, още през 2004 г.
Техниката променя базовия размер на шрифта на body-то чрез процент. Това настройва нещата,
така че 1em се равнява на 10px, вместо по подразбиране 16px. За да зададете размер на шрифта еквивалентен на 14px,
настроите го на 1.4em.
{ font-size:62.5%; }
{ font-size: 2.4em; } /* =24px */
{ font-size: 1.4em; } /* =14px */
{ font-size: 1.4em; } /* =14px? */
Проблемът с em-начина на оразмеряване е, че големината на шрифта е съставна. Списък в списъка не е 14px, това е 20px. Отиди друго ниво по-дълбоко и това е 27px! Тези проблеми могат да бъдат избегнати с обявяване на всички елементи деца да иползват 1em, с което се избягва ефекта на натрупването.
{ font-size:62.5%; }
{ font-size: 2.4em; } /* =24px */
{ font-size: 1.4em; } /* =14px */
{ font-size: 1.4em; } /* =14px? */
/* etc */ { font-size: 1em; }
Усложнената природа на em-базираното оразмеряване на шрифт може да бъде разочароващо, така че какво друго може да се направи?
Оразмеряване с rem
CSS3 въвежда няколко нови единици, включително rem единица, което означава "корен em". Нека погледнем как работи REM.
Em единицата е свързана с размера на шрифта майка, което води до ефекта на натрупването. Rem единицатa се отнася до корена -или HTML елемента.
Това означава, че можем да си определим единен размер на шрифта на HTML елемента и да дефинираме всички следващи rem единици,
като процент от този размер.
{ font-size:62.5%; }
{ font-size: 1.4em; } /* =14px */
{ font-size: 2.4em; } /* =24px */
Определяйки размера на базовия шрифт да е 62.5%, имаме удобството да оразмеряване с REM по начин,
който е сходен на този при използване на пиксели.
Но каква подкрепа има rem от страна на браузърите?
Може да се изненадате да откриете, че е учудващо приличен брой браузъри поддържа rem: Safari 5, Chrome, Firefox 3.6 +, и дори Internet Explorer 9
има подкрепа за това. Хубавото е, че IE9 поддържа преоразмеряване текст, когато се използва REM.
Какво правим, за браузъри, които не поддържат REM единици? Можем да използваме пиксели, ако нямате нищо против
потребителите на по-стари версии на Internet Explorer все още да не са в състояние да променят размера на текста (добре,че поне има
увеличение на страницата в IE7 и IE8). За да направите това, първо определяме размер на шрифта в px единици и след това го
дефинираме отново с помощта на rem единици.
{ font-size:62.5%; }
{ font-size: 14px; font-size: 1.4em; } /* =14px */
{ font-size: 24px; font-size: 2.4em; } /* =24px */
И така, сега ние имаме последователно и предсказуемо оразмеряване във всички браузъри, както и текст с променливи размери в актуалните версии на всички основни браузъри.
