Font - CSS-trikovi | CSS Almanah 2025

fontNekretnina u CSS je Kratica svojstva koja kombinira svi sljedeći pod-svojstva u jednoj izjavi.

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

Postoji sedam fontpodvrste, uključujući:

font-stretch: ovo svojstvo postavlja širinu fonta, kao što je sažeti ili prošireni.
- normal
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
font-style: čini tekst kurzivom ili kosim.
- normal
- italic
- oblique
- inherit
font-variant: mijenja ciljni tekst u male velike početne crte.
- normal
- small-caps
- inherit
font-weight: postavlja težinu ili debljinu fonta.
- normal
- bold
- bolder
- lighter
- 100, 200, 300, 400, 500, 600, 700, 800, 900
- inherit
font-size: postavlja visinu fonta.
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller, larger
- percentage
- inherit
line-height: definira količinu prostora iznad i ispod umetnutih elemenata.
- normal
- number (font-size multiplier)
- percentage
font-family: definira font koji se primjenjuje na element.
- sans-serif
- serif
- monospace
- cursive
- fantasy
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
- "string"

Kratkopisni fontovi fontova

fontSvojstvo nije tako jednostavan kao i ostali stenogram svojstva, dijelom zbog zahtjeva sintaksa za to, a dijelom zbog pitanja nasljeđivanja.

Evo sažetka nekih stvari koje biste trebali znati kada koristite ovo stenografsko svojstvo.

Obavezne vrijednosti

Dvije su fontstenografske vrijednosti obvezne: font-sizei font-family. Ako bilo koji od ovih nije uključen, cijela deklaracija će se zanemariti.

Također, font-familymora se deklarirati kao posljednja od svih vrijednosti, u protivnom će se opet zanemariti cijela deklaracija.

Izborne vrijednosti

Svih pet ostalih vrijednosti nije obavezno. Ako u deklaraciju uključite bilo koji od font-style,, font-varianti font-weight, oni moraju doći prije font-size. Ako nisu, ignorirat će se i također mogu dovesti do zanemarivanja obveznih vrijednosti.

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

U gore navedenom primjeru uključena su tri izbora. Sve dok su prethodno definirani font-size, mogu se postaviti u bilo kojem redoslijedu.

Uključivanje line-heightje također neobavezno, ali se može deklarirati samo nakon font-sizei samo nakon kose crte:

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

U gornjem primjeru, to line-heightje "20px". Ako izostavite line-height, morate izostaviti i kosu crtu, inače će se zanemariti cijeli redak.

Korištenje razvlačenja fontova

font-stretchImovina je novo u CSS3 pa ako se koristi u starijoj preglednik koji ne podržava font-stretchu fontili ukratko, to će izazvati cijeli redak treba ignorirati.

Specifikacija preporučuje uključivanje zamjenskog stanja bez font-stretch, poput ovog:

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

Nasljeđivanje opcionalaca

Ako izostavite bilo koju opcijanalnu vrijednost (uključujući line-height), izostavljeni opcionalni elementi neće naslijediti vrijednosti od svog nadređenog elementa, kao što je to često slučaj s tipografskim svojstvima. Umjesto toga, vratit će se u početno stanje.

Na primjer:

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

U ovom su slučaju neobavezne vrijednosti (kurziv, mala slova i podebljano) stavljene na fontdeklaraciju na elementu. To će se također odnositi na većinu podređenih elemenata.

Međutim, budući da smo ponovno deklarirali fontsvojstvo elemenata odlomaka, svi će se parametri resetirati na odlomke, zbog čega će se stil, varijanta, težina i visina retka vratiti na početne vrijednosti.

Ključne riječi za definiranje sistemskih fontova

Uz gornju sintaksu, fontsvojstvo također omogućuje upotrebu ključnih riječi kao vrijednosti. Oni su:

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

Te vrijednosti ključnih riječi postavljaju font na onaj koji se koristi u korisničkom operacijskom sustavu za tu određenu kategoriju. Na primjer, definiranjem "caption" postavit će se font na tom elementu da koristi isti font koji se koristi u operacijskom sustavu za kontrole s naslovima (gumbi, padajući padajući kanali itd.).

Jedna ključna riječ obuhvaća cijelu vrijednost:

body ( font: menu; )

Ostala ranije spomenuta svojstva nisu važeća zajedno s ovim ključnim riječima. Te se ključne riječi mogu koristiti samo sa fontstenografijom i ne mogu se deklarirati pomoću bilo kojeg pojedinačnog svojstva stenografije.