font-sizeОсобину одређује величину, или висину, фонта. font-sizeутиче не само на фонт на који се примењује, већ се користи и за израчунавање вредности јединица ем, рем и ек дужине.
p ( font-size: 20px; )font-sizeможе да прихвати кључне вредности, јединице дужине или проценте као вредности. Важно је напоменути да је, када је проглашена делом fontстенографије, font-sizeобавезна вредност. Ако није укључен у стенографију, цео ред се занемарује.
Вредности дужине (нпр. Пк, ем, рем, ек, итд.) На које се примењују font-sizeне могу бити негативне.
Апсолутне кључне речи и вредности
.element ( font-size: small; )Прихвата следеће апсолутне вредности кључних речи:
xx-smallx-smallsmallmediumlargex-largexx-large
Ове апсолутне вредности мапирају се у одређене величине фонтова како их израчунава прегледач. Али такође можете да користите две вредности кључних речи које су у односу на величину фонта надређеног елемента.
Остале апсолутне вредности укључују mm(милиметре), cm(центиметре), (инче) in, pt(поене) и pc(пике). Једна тачка је једнака 1/72 инча, док је једна пика 12 бодова - ове вредности се обично користе за штампане документе.
Релативне кључне речи
.element ( font-size: larger; )largersmaller
На пример, ако надређени елемент има величину фонта small, подређени елемент са дефинисаном релативном величином largerучинит ће величину фонта једнаком mediumза подређени елемент.
Процентуалне вредности
.element ( font-size: 110%; )Процентуалне вредности, као што је подешавање величине фонта од 110%, такође су у односу на величину фонта надређеног елемента, као што је приказано у демонстрацији испод:
Погледајте Пен кдбЕЛЛ од ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.
Ем јединица
.element ( font-size: 2em; )Јединица ем је релативна јединица заснована на израчунатој вредности величине фонта надређеног елемента. То значи да подређени елементи увек зависе од родитеља да би подесио величину фонта. На пример:
This is a heading
This is some text.
.container ( font-size: 16px; ) p ( font-size: 1em; ) h2 ( font-size: 2em; )У примеру изнад, пасус ће имати величину фонта 16пк јер је 1 к 16 = 16пк, док ће наслов бити 32пк јер је 2 к 16 = 32пк. Постоје многе предности скалирања у зависности од величине фонта надређеног елемента, наиме можемо умотати елементе у контејнер и знати да ће сва деца увек бити међусобно релативна:
Погледајте оловку како откривате како ем јединица ради помоћу ЦСС-трикова (@ цсс-трикови) на ЦодеПен-у.
Рем јединица
У случају рем јединица, међутим, величина фонта зависи од вредности основног елемента (или htmlелемента).
html ( font-size: 16px; ) p ( font-size: 1.5rem; )У горњем примеру, рем јединица је једнака 16 пиксела (јер је наслеђена од html/ роот елемента) и самим тим величина фонта за све елементе пасуса израчунаће се на 24 пиксела (1,5 к 16 = 24). За разлику од ем јединица, пасус ће занемарити стил свих својих родитеља осим роот-а.
Ову јединицу подржавају следећи прегледачи:
| Хром | Сафари | Фирефок | Опера | ИЕ | Андроид | иОС |
|---|---|---|---|---|---|---|
| Извођење радова | Извођење радова | Извођење радова | Извођење радова | 10+ | Извођење радова | Извођење радова |
Бивша јединица
.element ( font-size: 20ex; )За ек јединице, 1ек би био једнак израчунатој висини малог слова к основног елемента. Дакле, у примеру испод постављен је htmlелемент, 20pxа све остале величине фонтова су одређене висином к тог фонта.
Погледајте оловку како откривате како бивша јединица ради помоћу ЦСС-трикова (@ цсс-трикови) на ЦодеПен-у.
Експериментисати са демо изнад моје замене font-familyна htmlелемента да види како се други величине слова промене.
Јединице видног поља
.element-one ( font-size: 100vh; ) .element-two ( font-size: 100vw; )Јединице оквира за приказ , као што су vwи vh, подешавају величину фонта елемента у односу на димензије оквира за приказ:
- 1вв = 1% ширине видног поља
- 1 вх = 1% висине видног поља
Па ако узмемо следећи пример:
.element ( font-size: 100vh; )Тада ће се рећи да величина фонта елемента увек треба да буде 100% висине оквира за приказ (50вх би било 50%, 15вх би било 15% и тако даље). У демонстрацији испод покушајте да промените величину примера како бисте гледали како се тип истеже:
Погледајте тип Величина оловке са вх јединицама компаније ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.
vw јединице се разликују по томе што поставља висину облика слова ширином оквира за приказ, тако да ћете у демонстрацији испод морати хоризонтално да промените величину прозора прегледача да бисте видели ове промене:
Погледајте тип Величина оловке са вв јединицама компаније ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.
Ове јединице подржавају следећи прегледачи:
| Хром | Сафари | Фирефок | Опера | ИЕ | Андроид | иОС |
|---|---|---|---|---|---|---|
| 31+ | 7+ | 31+ | 27+ | 9+ | 4.4+ | 7.1+ |
Важно је напоменути да постоје још две јединице приказа: vminи vmax. Први ће пронаћи вредности vhи vwи поставити величину фонта као најмању од две, док vmaxће величину фонта поставити на највећу од ове две вредности.
Јединица цх
.element ( font-size: 24ch; )chЈединица је сличан exјединице у да ће поставити величину слова елемента у односу на ширини 0 (нула) глиф на фонт:
Погледајте тип Величине оловке са цх јединицама компаније ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.
Ову јединицу подржавају:
| Хром | Сафари | Фирефок | Опера | ИЕ | Андроид | иОС |
|---|---|---|---|---|---|---|
| 27+ | Извођење радова | 10+ | Извођење радова | 9+ | Извођење радова | Извођење радова |