Размер на CSS шрифтове

Има много начини да персонализирате размера на CSS шрифта. Значителна част от уеб дизайнерите все още използват пикселите, но това не е правилният подход. Pixel е твърде проста опция, която не винаги е подходяща за оформлението на отзивчивите страници. Обмислете всички съществуващи методи за преоразмеряване на 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

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

Интерес: най-объркващата опция

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

В повечето случаи параметърът се изчислява в зависимост от размера на родителя, но не винаги. Ако зададете свойство margin-left, процентът ще се изчисли в зависимост от ширината на основния блок. Ако зададете височината на линията, процентът ще се взема в зависимост от текущия размер на шрифта.

Задаването на параметри като процент изисква внимателно експериментиране. Бъдете внимателни с тази мерна единица, тъй като тя може лесно да промени облика на вашия набор.

Rem: просто и гъвкаво устройство

По-горе са много начини да персонализирате размера на шрифта в CSS, но никой от тях не е наистина удобен. За опростяване на работата е изобретен параметър rem, който се изчислява в зависимост от стойността, зададена за html маркера.

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

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

Vw и vh: екзотични опции

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

Обобщава

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

Препоръчително е да спазвате 2 правила:

• ако свойствата трябва да бъдат мащабирани спрямо размера на шрифта, em е най-добрият избор;
• в други случаи се препоръчва рем.

Em често се използва за задаване на размерите на уплътнението и маржа. Бъдете внимателни, ако определите в него размера на символите за списъците, тъй като поради голямото вмъкване символите могат да бъдат нечетливи.