CSS font : CSS Font

Svojstva CSS fonta se nasljeđuju s roditeljskih elemenata na elemente potomke.

Font

Svojstvo font služi za postavljanje jednog ili više slijedećih svojstava: font-style, font-weight, font-variant, font-size, line-height i font-family.

Primjer:

font: italic bold normal small 1.4em Verdana, sans-serif;

Ovaj primjer odjednom postavlja sva slijedeća svojstva i dodjeljuje im vrijednosti:

font-style: italic;
font-weight: bold;
font-variant: normal;
font-size: small;
line-height: 1.4em;
font-family: Verdana, sans-serif;

CSS u Web dizajnu? Da!

Obitelji fontova : Font Family

Svojstvo font-family omogućava postavljanje niza naziva fontova kojima može biti prikazan tekst unutar elementa. Možemo odabrati ime fonta ili ime generičkog fonta.

Želimo li na različitim platformama prikazati web stranicu na jedinstven način potrebno je navesti niz imena fontova. Različite platforme imaju različite ugrađene vrste fontova. Na kraju popisa poželjno je dodati i ime generičkog fonta koji određuje tip slova kojima će biti prikazan tekst ako niti jedan od prethodnih fontova nije pronađen u računalu na kojem je prikazana web stranica.

Primjer:

font-family: Verdana, Geneve, Arial, Helvetica, sans-serif;

Veličina fonta : Font Size

Svojstvo font-size koristimo za promjenu veličine slova u tekstu.

Koristimo slijedeći obrazac:

font-size: vrijednost;

Možemo odabrati:
a) predodređene vrijednosti ili
b) upisati veličinu ili postotak veličine slova:

• xx-large
• x-large
• larger
• medium
• top
• smaller
• x-small
• xx-small
• veličina
• % (postotak)

Stil fonta : Font Style

Svojstvo font-style koristimo ako želimo nakositi slova.

Obrazac je slijedeći:

font-style: vrijednost;

Moguće vrijednosti su:

• normal
• italic
• oblique

Verzal fonta : Font Variant

Svojstvo font-variantfont-variant omogućava uključivanje ispisa umjesto malih slova velikih slova manje visine.

Obrazac je slijedeći:

font-variant: vrijednost;

Moguće vrijednosti su:

• normal
• small-caps

Debljina slova: Font Weight

Svojstvo font-weight omogućavaju određivanje debljine slova.

Obrazac je slijedeći:

font-weight: vrijednost;

Moguće vrijednosti su:

• 100
• 200
• 300
• 400
• 500
• 600
• 700
• 800
• 900
• lighter
• normal
• bold
• bolder