Величина фонта ЦСС

Постоји много начина да прилагодите величину ЦСС фонта. Значајан дио веб дизајнера још увијек користи пикселе, али то није прави приступ. Пиксел је сувише једноставна опција која није увек погодна за распоред прилагођених страница. Размотрите све постојеће методе за промену величине ЦСС фонта.

Шта је то "величина фонта"?

Постоји мишљење да величина означава величину највећег карактера наведеног фонта. Није. У ствари, вредност је уграђена у фонт, и мало је вероватно да ће моћи да је мери ручно помоћу равнала. Обично је величина нешто већа од удаљености од врха највећег слова до дна најмањег. Ово се ради како би се уклопила било која комбинација знакова у одређеном простору. Такође је важно да наведете параметар "лине-хеигхт", иначе слова п, к и слично могу ићи даље.

Пикелс

Најчешћа опција. Инсталирано на следећи начин:

фонт-сизе: 16пк;

Предност пиксела је само једна - нема проблема са вредношћу. Ништа се не рачуна. Која је величина наведена, а то ће бити знакови на екрану. Недостатак је потешкоћа са великом величином ЦСС-а. Неће бити могуће успоставити однос између различитих величина.

Број "пиксела" може се приписати застарелим јединицама. То укључује пц, цм, мм и пт. Дакле, мм је милиметар, цм је центиметар. Пт и пц - врх типографије и типографије. Зашто су ове методе застареле? Пошто нису били “независни” - претраживач је аутоматски поново израчунао вредности у пикселима. Према томе, проблеми су били исти као код пк. Успут, у једном цм са тачке гледишта прегледник садржи 38пк.

Ем: вредност зависи од величине фонта родитељског елемента

Једноставно је. Претпоставимо да имате див за који је величина фонта постављена на 16пк. Садржи још један див за који је величина фонта ЦСС постављена на 2ем. Према томе, 1ем ће бити 16пк (тј. Величина фонта родитељског елемента), а 2ем ће бити двоструко већи, тј. 32пк.

У родитељском елементу можете поставити и вриједност у ем. У овом случају, то ће зависити од основне величине наведене у телу или хтмл-у. Ем је релативна величина ЦСС фонта који ће се повећавати и смањивати са величином знакова родитељског елемента. Ово је згодно - да промените вредност на великом броју места, потребно је само да промените параметре родитеља.

За професионалце: ек и цх

Практично не користе уобичајени дизајнери и фронт-девелопери. Ек је вредност симбола "Кс", а цх је симбол "0". У одабраном фонту можда не постоје такви знакови, али се параметри и даље могу користити. Није познато за одређене случајеве за које су такве димензије најприкладније. Покушајте да експериментишете - можда ће вам бити прикладније? Међутим, запамтите да су ек и цх “условне” јединице, тако да ће фино подешавање параметара бити тешко.

Интерес: најнеобичнија опција

Како поставити величину фонта у ЦСС-у као постотак? Чини се да је све једноставно - потребно је само да наведете жељени параметар и ставите га иза симбола "%". Али овде долази важно питање: "Који ће бити проценат дате величине?"

У већини случајева, параметар се израчунава у зависности од величине родитеља, али не увек. Ако поставите својство маргин-лефт, проценат ће се израчунати у зависности од ширине родитељског блока. Ако поставите висину линије, проценат ће се узети у зависности од тренутне величине фонта.

Постављање параметара у процентима захтева пажљиво експериментисање. Будите пажљиви са овом јединицом мере, јер она лако може да промени изглед вашег слога.

Рем: једноставна и разноврсна јединица

Ово је много начина да прилагодите величину фонта у ЦСС-у, али ниједан од њих није заиста згодан. Да би се поједноставио рад, измишљен је параметар рем, који се израчунава у зависности од вредности специфициране за хтмл таг.

То је лакше него на први поглед. На пример, за ХТМЛ ознаку, у којој је сав садржај странице обмотан, поставите величину фонта ЦСС 16пк. Према томе, 1рем ће сада бити 16пк. 2рем је 32пк, итд. Било који пропорција се може користити: 0.2рем, 1.1рем, 100рем ... Прегледач ће пажљиво израчунати параметре.

У хтмл-у не можете ништа да додирнете, јер сами претраживачи постављају одређену величину фонта за омот. Али за детаљније прилагођавање, боље је редефинисати индикатор. Главна предност рем-а је у томе што можете лако скалирати фонтове на одређеном мјесту без утјецаја на друге елементе. Међутим, запамтите да старији претраживачи (ИЕ испод верзије 9) не подржавају овај индикатор.

Вв и вх: егзотичне опције

Најновије јединице мјерења креиране за мобилне уређаје. Вв је 1% од ширине прозора на којем корисник гледа ваш сајт. Вх - 1% његове висине. Величина знакова ће бити аутоматски скалирана у зависности од екрана уређаја посетиоца. Да бисте изабрали одговарајућу величину током изгледа, повећајте или смањите величину екрана.

Сумминг уп

Већ дуго није могуће поставити величину ЦСС фонтова само у пк. Много је погодније користити рем, вх и вв (поготово са респонзивним дизајном), као и ем. Свака од ових опција има своје предности и недостатке, па провјерите неколико метода прије употребе. Модерни веб дизајнери често користе рем јер је то један од најлакших начина да промените величину фонта. Међутим, то има ману - компоненте постају мање модуларне.

Препоручује се да следите 2 правила:

• ако се особине морају скалирати у односу на величину фонта, ем је најбољи избор;
• у другим случајевима препоручује се рем.

Ем се често користи за подешавање величине падова и маргина. Будите опрезни ако у њему наведете величину знакова за листе, јер због великог гнијежђења, знакови могу бити нечитљиви.