Фонт - ЦСС-трикови | ЦСС Алманац 2025

fontИмовина у ЦСС је скраћеница имовина која комбинује све следеће под-својства у једној декларацији.

body ( font: normal small-caps normal 16px/1.4 Georgia; ) /* is the same as: body ( font-family: Georgia; line-height: 1.4; font-weight: normal; font-stretch: normal; font-variant: small-caps; font-size: 16px; ) */

Постоји седам fontпод-својстава, укључујући:

font-stretch: ово својство поставља ширину фонта, на пример сажет или проширен.
- normal
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
font-style: чини текст укошеним или косим.
- normal
- italic
- oblique
- inherit
font-variant: мења циљни текст у мала слова.
- normal
- small-caps
- inherit
font-weight: поставља тежину или дебљину слова.
- normal
- bold
- bolder
- lighter
- 100, 200, 300, 400, 500, 600, 700, 800, 900
- inherit
font-size: поставља висину фонта.
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller, larger
- percentage
- inherit
line-height: дефинише количину простора изнад и испод инлине елемената.
- normal
- number (font-size multiplier)
- percentage
font-family: дефинише фонт који се примењује на елемент.
- sans-serif
- serif
- monospace
- cursive
- fantasy
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
- "string"

Фонт Схортханд Готцхас

fontИмовина није тако једноставан и друге стенографске особина, делимично због услова синтаксе за њега, а делом због проблема о наслеђивању.

Ево резимеа неких ствари које бисте требали знати када користите ово стенографско својство.

Обавезне вредности

Две вредности у fontскраћеници су обавезне: font-sizeи font-family. Ако ниједна од ових опција није укључена, цела декларација ће се занемарити.

Такође, font-familyмора бити декларисана као последња од свих вредности, у супротном, цела декларација ће бити занемарена.

Факултативне вредности

Свих пет осталих вредности нису обавезне. Ако укључите било који од font-style,, font-variantи font-weight, они морају доћи пре font-sizeу декларацију. Ако нису, биће занемарени и такође могу довести до занемаривања обавезних вредности.

body ( font: italic small-caps bold 44px Georgia, sans-serif; )

У горенаведеном примеру су укључена три опциона. Све док су претходно дефинисани font-size, могу се поставити у било којем редоследу.

Укључивање line-heightје такође необавезно, али се може декларирати само након font-sizeи само након косе црте:

body ( font: 44px/20px Georgia, sans-serif; )

У горњем примеру line-heightје „20пк“. Ако изоставите line-height, морате изоставити и косу црту, иначе ће се занемарити цела линија.

Користећи фонт-стретцх

font-stretchИмовина је ново у ЦСС3 па ако се користи у старијој претраживача који не подржава font-stretchу fontстенографски, то ће изазвати читав линија треба игнорисати.

Спецификација препоручује укључивање резервног дела без font-stretch, попут овог:

body ( font: italic small-caps bold 44px Georgia, sans-serif; /* fallback for older browsers */ font: ultra-condensed italic small-caps bold 44px Georgia, sans-serif; )

Наслеђивање опционалаца

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

На пример:

body ( font: italic small-caps bold 44px/50px Georgia, sans-serif; ) p ( font: 30px Georgia, sans-serif; )

У овом случају, необавезне вредности (курзив, мала слова и подебљано) стављају се на fontдекларацију на елементу. То ће се такође применити на већину подређених елемената.

Међутим, пошто смо поново декларирали fontсвојство елемената пасуса, сви опционални параметри ће се ресетовати на пасусе, што ће довести до тога да се стил, варијанта, тежина и висина линије врате на почетне вредности.

Кључне речи за дефинисање системских фонтова

Поред горње синтаксе, fontсвојство такође омогућава употребу кључних речи као вредности. Су:

caption
icon
menu
message-box
small-caption
status-bar

Ове вредности кључних речи постављају фонт на онај који се користи у корисничком оперативном систему за ту одређену категорију. На пример, дефинисањем „цаптион“ поставиће се фонт на том елементу да користи исти фонт који се користи у оперативном систему за контроле са насловима (дугмад, падајући мени итд.).

Једна кључна реч садржи целокупну вредност:

body ( font: menu; )

Остала својства која су раније поменута нису важећа заједно са овим кључним речима. Ове кључне речи могу се користити само са fontскраћеницом и не могу се декларисати помоћу било ког појединачног својства стенографије.