Единици за измерване на размера на шрифта CSS

Има много начини да персонализирате размера на CSS шрифта. Значителна част от манипулаторите все още използват пиксели, но това не е правилният подход. Пикселът е много проста опция, която не винаги е подходяща за адаптиране на оформленията на страниците. Разгледайте всички съществуващи методи за промяна на размера на шрифта на CSS.

Какъв е този "размер на шрифта" като цяло?

Смята се, че размерът се отнася до стойността на най-големия символ на посочения шрифт. Това не е така. Всъщност стойността е вградена в шрифта и е малко вероятно да се измери ръчно, с владетел. Обикновено размерът е малко по-голям от разстоянието от горната част на главна буква до долната част на най-малката. Това се прави, за да може всяка комбинация от знаци да се побере в дадено пространство. Също така е важно да се определи параметър "line-height", в противен случай буквите p, q и други подобни могат да надхвърлят границите.

Пиксели

Най-често срещаната версия. Инсталира както следва: размер на шрифта: 16px; Предимството на пикселите е само едно нещо - никаква трудност с магнитуд. Няма какво да се брои. Какъв размер е посочен, ще бъдат символите на екрана. Недостатък е трудността с адаптивния размер на шрифта CSS. Няма да бъде възможно да се установи връзка между различните размери. Сред "пикселите" могат да се приписват остарели мерни единици. Те включват pc, cm, mm и pt. Да, mm е милиметър, cm е сантиметър. Pt и pc - типографска точка и типографски връх. Защо тези методи са остарели? Защото те не бяха "независими" - браузърътАвтоматично броени стойности в пиксел. Съответно, проблемите бяха същите като при px. Между другото, в един см от гледна точка на браузъра съдържа 38px.

Em: стойността зависи от размера на шрифта на родителския елемент

Всичко е просто. Да предположим, че имате div, за който е определен размер на шрифта 16px. В нея има друг div, за който размерът на шрифта CSS е зададен на 2em. Съответно, 1em - ще бъде 16px (т.е. размерът на шрифта на родителския елемент) и 2em - два пъти, т.е. 32px.

Можете също да зададете стойността на em в родителския елемент. В този случай тя ще зависи от основния размер, даден в тялото или html. Em е относителният размер на CSS шрифта, който ще се увеличава и намалява заедно с размера на знаците на родителския елемент. Това е удобно - за да промените размера на голям брой места, трябва само да промените параметрите на родителите.

За специалисти: ex и ch

Практически не се използват от обикновените манипулатори и разработчици. Ex е стойността на знака "X", а ch е символ "0". Избраният шрифт може да няма такива знаци, но опциите все още могат да се използват. Със сигурност не е известно за кои случаи такива размери са най-подходящи. Опитайте да експериментирате - може би ще бъде по-добре за вас? Не забравяйте обаче, че ex и ch са "условни" единици, така че фината настройка на параметрите ще бъде трудна.

Процент: най-нематериалната опция

Как да зададем размера на шрифта в CSS като процент? Изглежда, че всичко е просто - трябва само да посочите желаната опция и да поставите символа "%" след него. Но ето говъзниква важният въпрос: "Какъв процент от размера ще бъде даден?"
В повечето случаи параметърът се изчислява в зависимост от размера на родителите, но не винаги. Ако зададете свойство margin-left, процентът ще се изчисли в зависимост от ширината на основния блок. Ако зададете височина на линията, процентът ще се взема в зависимост от текущия размер на шрифта. Задаването на параметри в проценти изисква внимателни експерименти. Бъдете внимателни с това устройство, защото лесно може да промените външния вид на оформлението.

Rem: Проста и универсална единица

По-горе е списък с много начини за персонализиране на размера на шрифта в CSS, но никой от тях не е удобен. За опростяване на работата се изчислява параметърът rem, който се изчислява в зависимост от размера на тага, определен за html. Това е по-лесно, отколкото изглежда на пръв поглед. Например, за html маркера, който обгръща цялото съдържание на страницата, можете да го зададете в CSS размер на шрифта 16px. Съответно, 1rem сега ще бъде 16px. 2rem е 32px и т.н. Можете да използвате всяко съотношение: 02 rem, 11 rem, 100rem Браузърът ще изброи точно параметрите.

В html не можете да докосвате нищо, защото самите браузъри задават определен размер на шрифта за обвивката. Но за по-внимателна настройка, най-добре е да предефинирате резултата. Основното предимство на rem е, че можете лесно да мащабирате шрифтовете на определено място, без да засягате други елементи. Не забравяйте обаче, че по-старите IE браузъри под версия 9) не поддържат този показател.

Vw и vh: екзотични параметри

Последни единициизмервания, направени за мобилни устройства. Vw е 1% от ширината на прозореца, при която потребителят разглежда вашия сайт. Vh - 1% от височината му. Стойностите на знаците автоматично ще бъдат мащабирани в зависимост от екрана на посетителя. За да изберете подходящия размер при оформлението, увеличете и намалете размера на екрана.

Да обобщим

От много време не може да зададете размера на CSS шрифтовете само чрез px. Много по-удобно е да се използват rem, vh и vw (особено за адаптивен дизайн), както и em. Всяка от тези опции има своите предимства и недостатъци, затова проверете няколко метода, преди да я използвате. Модерните манипулатори често прибягват до рем, защото това е един от най-лесните начини за промяна на размера на шрифта. Въпреки това, той има недостатък - компонентите стават по-малко модулни.
Препоръчва се да се придържат към две правила:
  • ако свойствата трябва да бъдат мащабирани спрямо размера на шрифта, em ще бъде предпочитаният избор;
  • В други случаи се препоръчва да се прилага рем.
  • Em често се използва за задаване на размерите на уплътнението и маржа. Бъдете внимателни, ако определите в него стойността на символите за списъците, защото поради големите заграждения символите могат да бъдат изкривени.

    Свързани публикации