Pisava - CSS-triki | Almanah CSS 2025

fontHotel v CSS je okrajšava lastnost, ki združuje vse naslednje podskupine lastnosti v eni sami prijavi.

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; ) */

Obstaja sedem fontpod-lastnosti, vključno z:

font-stretch: ta lastnost nastavi širino pisave, na primer strnjeno ali razširjeno.
- normal
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
font-style: naredi besedilo poševno ali poševno.
- normal
- italic
- oblique
- inherit
font-variant: spremeni ciljno besedilo v male začetnice.
- normal
- small-caps
- inherit
font-weight: nastavi težo ali debelino pisave.
- normal
- bold
- bolder
- lighter
- 100, 200, 300, 400, 500, 600, 700, 800, 900
- inherit
font-size: nastavi višino pisave.
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller, larger
- percentage
- inherit
line-height: določa količino prostora nad in pod vstavljenimi elementi.
- normal
- number (font-size multiplier)
- percentage
font-family: definira pisavo, ki je uporabljena za element.
- sans-serif
- serif
- monospace
- cursive
- fantasy
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
- "string"

Okrajšava pisave Gotchas

fontLastnost ni tako enostavna, kot druga okrajšava lastnosti, deloma zaradi zahtev skladenjskih za njo, in delno zaradi vprašanja dedovanja.

Tu je povzetek nekaterih stvari, ki bi jih morali vedeti pri uporabi te stenografske lastnosti.

Obvezne vrednote

Dve fontokrajšani vrednosti sta obvezni: font-sizein font-family. Če nobeno od teh ni vključeno, bo celotna izjava prezrta.

Prav tako font-familymora biti razglašena zadnja od vseh vrednosti, sicer bo celotna izjava prezrta.

Izbirne vrednosti

Vseh pet drugih vrednosti ni obveznih. Če vključite katerega od font-style,, font-variantin font-weight, morajo biti font-sizev izjavi pred tem. Če niso, bodo prezrte in lahko povzročijo tudi prezrtje obveznih vrednosti.

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

V zgornjem primeru so vključeni trije možnosti. Dokler so te določene prej font-size, jih lahko postavite v poljubnem vrstnem redu.

Vključitev line-heightje prav tako neobvezna, vendar jo je mogoče razglasiti le po font-sizein samo po poševnici naprej:

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

V zgornjem primeru line-heightje »20px«. Če izpustite line-height, morate izpustiti tudi poševnico, sicer bo celotna vrstica prezrta.

Uporaba raztezanja pisave

font-stretchLastnost je novega v CSS3 tako da, če se uporablja v starejši brskalnik, ki ne podpira font-stretchv fontkratico, bo to povzročilo celotno linijo, ki se ne upošteva.

Specifikacija priporoča vključitev nadomestnega dela brez font-stretch, kot je ta:

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; )

Dedovanje izbrancev

Če izpustite katero koli optianalno vrednost (vključno line-height), izpuščeni opcionalni elementi ne bodo podedovali vrednosti iz nadrejenega elementa, kot je to pogosto pri tipografskih lastnostih. Namesto tega bodo ponastavljeni v prvotno stanje.

Na primer:

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

V tem primeru so neobvezne vrednosti (ležeče, male črke in krepko) v fontdeklaraciji na elementu. To bo veljalo tudi za večino podrejenih elementov.

Ker pa smo fontlastnost elementov odstavkov ponovno razglasili , bodo vse možnosti v odstavkih ponastavljene, tako da se slog, različica, teža in višina vrstice povrnejo na začetne vrednosti.

Ključne besede za določanje sistemskih pisav

Poleg zgornje sintakse fontlastnost omogoča tudi uporabo ključnih besed kot vrednosti. To so:

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

Te vrednosti ključnih besed nastavijo pisavo na tisto, ki se uporablja v uporabnikovem operacijskem sistemu za določeno kategorijo. Če na primer določite “caption”, bo pisava na tem elementu nastavila tako, da bo uporabila isto pisavo, ki se uporablja v operacijskem sistemu za nadzorne liste (gumbi, spustni meniji itd.).

Ena ključna beseda obsega celotno vrednost:

body ( font: menu; )

Druge prej omenjene lastnosti v povezavi s temi ključnimi besedami niso veljavne. Te ključne besede je mogoče uporabljati samo s fontstenografijo in jih ni mogoče deklarirati z nobeno od posameznih lastnosti stenografije.