CSS/Fontide sättimine

Kaldkirjas tekst: font-style

Väärtus: normal | italic | oblique | inherit

Atribuut font-style määrab ära kas tekst on tavalises või kaldkirjas ehk kursiivis. Põhimõtteliselt pole mingit vahet, kas kasutada 'italic' või 'oblique'. Enamik brausereid näitavad neid täpselt ühte moodi ning isegi W3C spetsifikatsioon ei tee neil olulist vahet. Seega jääb maitse asjaks, kumba keegi kasutab.

body { font-style: italic }
em { font-style: normal }

Ülalolevas näites on kogu dokumendi sisu kaldkirjas ning elemendi 'em' sisu, mis on vaikimisi kursiivis, on seekord püstine.

Rasvane tekst: font-weight

Väärtus: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

Atribuut font-weight määrab ära teksti rasvasuse ehk raskuse. Harilikult kasutatakse väärtusi 'normal' ja 'bold', sest ülejäänuid tõlgendavad erinevad brauserid üsna erinevalt või ei tõlgenda üldse. W3C järgi vastab väärtusele '400' väärtus 'normal' ning väärtusele '700' väärtus 'bold'. 'bolder' muudab teksti ühe astme võrra rasvasemaks ning 'lighter' astme võrra vähem rasvaseks.

p { font-weight: bold }
strong { font-weight: normal }

Näites muudetakse iga paragrahvi tekst rasvaseks, aga elemendi 'strong' sisu, mis vaikimisi on rasvane, seatakse tavaliseks.

Trükitähtedega tekst: font-variant

Väärtus: normal | small-caps | inherit

Atribuudi font-variant väärtus 'small-caps' muudab tekstis väiketähed samasugusteks suurtähtedega ainukese vahega, et nood on natukene väiksemad.

h1 { font-variant: small-caps }
em { font-style: italic; font-variant: small-caps }

Näites on kõik pealkirjad 'h1' kirjutatud trükitähtedega ning kõik pealkirjades olevad 'em' elemendid kaldkirjas ning suurte tähtedega.

Teksti suurus: font-size

Teksti suurust määrab parameeter font-size. Suurust võib määrata nii absoluutselt kui suhteliselt. Põhiliselt määratakse suurus kasutades väärtusi 'xx-small' kuni 'xx-large', kus 'xx-small' on kõige väiksem, 'medium' keskmine ning 'xx-large' kõige suurem font.

h1 { font-size: xx-large }
h2 { font-size: x-large }
h3 { font-size: large }
p  { font-size: medium }
em { font-size: small }
h4 { font-size: x-small }
h5 { font-size: xx-small }

Tasub tähele panna, et mitmed brauserid on seadistatud sedasi, et liiga väikseks teksti muuta ei saa. Nii võivad näiteks eelnenud näites elementide 'h4' ja 'h5' fondid olla kuvatud täpselt ühesuurustena.

Suhteliselt saab määrata suurust väärtustega 'smaller' ja 'larger'. Esimene muudab teksti väiksemaks, teine suuremaks.

h1 { font-size: large }
strong { font-size: larger }

Näites on elemendi 'h1' font seatud astme võrra suuremaks kui keskmine, kui aga element 'strong' peaks asuma 'h1' sees, siis näidatakse seda teksti veel astme võrra suuremalt, ehk siis võrdselt väärtusega 'x-large'.

Samuti võib määrata fondi suurust kasutades pikkusühikuid või protsente:

p { font-size: 12pt }
h1 { font-size: 32px }
pre { font-size: 1.5em }
h2 { font-size: 5cm }
code { font-size: 50% }

Näites on elementide:

'p' font 12 punkti kõrgune,
'h1' font 32 ekraani pikseli kõrgune,
'pre' font poolteist korda suurem kui tavaliselt,
'h2' font viie sentimeetri kõrgune ja
'code' font poole väiksem kui harilikult.

Teksti font: font-family

Väärtus: <fondiperekonna-nimi> , <üldperekonna-nimi> | inherit

Atribuut font-family määrab teksti fondi.

Väärtus <fondiperekonna-nimi> võib olla suvalise fondi nimi nagu näiteks "Times New Roman", "Lucidia Sans" või "Verdana". Kui kasutaja arvutis font puudub, otsitakse sellenimelist fonti veebiserverist (uutes brauserites). Alternatiivid eristatakse komadega. Kindlasti tuleks viimase alternatiivina nimetada ka fondi üldperekonna nimi.

Väärtus <üldperekonna-nimi> võib olla üks viiest fontide üldperekonna nimest:

'serif' - šerifitega font, näiteks "Times New Roman" või "New Century Schoolbook".
'sans-serif' - ilma šerifitega font, näiteks "Verdana" või "Arial".
'cursive' - käsikirjas või kursiivis font, näiteks "Lucida Calligraphy" ja mitmed teised kalligraafilised fondid.
'fantasy' - siia kuuluvad mitmesugused erikujulised fondid, näiteks "Comic Sans MS" või "Minu enda tehtud font".
'monospace' - võrdsete tähevahedega font, näiteks "Courier New".

Graafiliselt võivad vastavad fontide perekonnad välja näha järgnevalt:

Järgneb koodinäide:

body { font-family: Verdana, Helvetica, sans-serif }
h1,h2,h3 { font-family: "Mechanical works", fantasy }
pre { font-family: monospace }

Näites määratakse levinud praktika kohaselt kogu dokumendi fondiks sans-serif font "Verdana", pealkirjade jaoks fantasy font "Mechanical works" ning eelvormindatud teksti fondiks monospace.

Ehk lühendatult: font

väärtus: <fondi-parameetrid-lühendatult> | <süsteemne-font> | inherit

Atribuuti font kasutatakse peamiselt fondiga seotud parameetrite ülesmärkimiseks lühendatud kujul ent selle kaudu saab kasutada ka klientarvuti operatsioonisüsteemis määratud fonte.

Fondi märkimine lühendatud kujul

Väärtus: <font-style> <font-variant> <font-weight> <font-size> / <line-height> <font-family>

Fontide lühendatud kujul ülesmärkimisel tuleb järgida ülaltoodud järjekorda. Kui mõni parameeter on seadistamata, siis kasutatakse sellel vaikimisi väärtusi.

h1 { font: italic bold x-large sans-serif }
h2 { font: normal small-caps "Verdana", sans-serif }
h3 { font: 12px/3px "Lucida Handwriting", cursive }

Süsteemsed fondid

Süsteemsete fontide idee on võimaldada lehekülje disainimisel lähtuda iga kasutaja süsteemsetest iseärasustest. Näiteks kui kasutaja A arvutis on akna tiitliriba fondiks rasvane 12 pikseli suurune Arial ning kasutaja B arvutis 25 pikseliline "Madise oma font", siis järgnev stiil määrab, et kasutajad A ja B näevad oma arvutis pealkirju 'h1' just selliselt nagu näeb välja nende akende tiitliriba font.

h1 { font: caption }

Tegelikkuses on aga brauserite toetus sellele võimalusele olematu ning reaalselt me seda kasutada ei saa.

Teksti värv: color

Väärtus: <värv> | inherit

Atribuut color määrb teksti värvi.

body { color: black }
em { color: red }
strong { color: #ff3 }

Näites on elemendi 'body' tekst must, 'em' tekst punane ning 'strong' tekst kollane. Täpsemalt võib erinevate värvide määramise kohta lugeda ühikute peatükist.

Suur ja väiketähed: text-transform

Väärtus: none | uppercase | lowercase | capitalize | inherit

Atribuuti text-transform kasutatakse selleks, et muuta kõik tähed SUURTÄHTEDEKS 'uppercase', väiketähtedeks 'lowercase' või et muuta suureks Iga Sõna Esimene Täht 'capitalize'. Väärtus 'none' märgib, et teksti ei muudeta.

h1 { text-transform: uppercase }
em { text-transform: capitalize }

Teksti suurtähtedeks muutmisega tasub olla ettevaatlik. Esiteks on suurtähtedes kirjutatud teksti raskem lugeda ja teiseks tuntakse arvutimaailmas sellist kirjastiili kui karjumist, mida ei taunita. Suuremate tekstilõikude puhul sobib tõenäoliselt paremini parameeter 'font-variant'. Mõistagi sõltub kõik konkreetsest olukorrast - lasteaialastele mõeldud teksti puhul on suurtähed ainumõeldav lahendus.

Dekoreerimine: text-decoration

Atribuuti text-decoration kasutatakse tekstile mitmesuguste dekoratsioonide tekitamiseks, peamiselt alla- ja läbijoonimiseks. Väärtus 'none' märgib, et dekoratsioonid puuduvad.

underline - joonib teksti alla
overline - tekitab teksti kohale joone
line-through - kriipsutab teksti läbi
blink - paneb teksti vilkuma

h1 { text-decoration: overline }
a { text-decoration: none }
del { text-decoration: line-through }

Näites on pealkiri 'h1' ülajoonitud, linkidelt on allajoonimine eemaldatud ning eemaldatud tekst 'del' on läbikriipsutatud.

Üldiselt pole eriti soovitatav linkidelt allajoonimist ära kaotada, kuigi see on levinud praktika, sest sellised ebastandartse välimusega lingid võivad kasutajates segadust tekitada. Kui alljoon ikkagi eemaldada, siis linkide värvust muu tekstiga sarnaseks muuta ei tohiks - soovitavalt peaksid lingid olema sinist värvi. Kindlasti ei tohiks aga kasutada allajoonimist mitte millegi muu kui linkide puhul, sest inimesed seostavad veebis allajoonitud teksti automaatselt lingiga. Teksti rõhutamiseks sobib märksa paremini näiteks teksti rasvaseks tegemine.

Väärtusi 'underline', 'overline', 'line-through' ja 'blink' võib omavahel kombineerida:

a { text-decoration: underline overline }
em { text-decoration: underline line-through overline blink }

Näites on elemendil 'a' joon nii teksti peal kui all ning elemendil 'em' on rakendatud kõik efektid.

Raamat: CSS

<< Pseudoklassid ja pseudoelemendid

Teksti paigutamine >>

Sisukord