CSS: font

Font ehk kirjatüüp. Järgnevalt kõik fontidega tegelemise võimalused.

Atribuut: font

Kombineerib endas kõikide järgnevate atribuutide väärtusi.

Näited:

Selle näite puhul: italic on font-style väärtus, bold on font-weight väärtus, 1em on font-size väärtus, 1.5 on line-height väärtus, kõik järgnev aga font-family väärtused.

font: italic bold 1em/1.5 helvetica, arial, sans-serif;

Atribuut: font-family

Määrab elemendile fondi ehk kirjatüübi. Fontide nimed peavad olema loetelu vormis. Lehitseja valib sellest loetelust esimese fondi, mis antud arvutis olemas on. Selleks, et tagada igas arvutis vähemalt ligikaudugi sarnane kirjatüüp, tuleb kõige viimaseks väärtuseks kirjutada fondi perekond ehk - kas font on serif või sans-serif perekonda kuuluv. Juhul, kui fondi nimi koosneb mitmest sõnast, tuleb nimi lisada jutumärkide vahele.

Näited:

Internetis väga laialt levinud fontide kombinatsioon. Helvetica-fonti Windows arvutites (vaikeseades) pole, seega kasutavad Windows arvutid Arial-i. Mõlemad fondid kuuluvad aga sans-serif perekonda.

font-family: helvetica, arial, sans-serif;

Trükipressis kasutatakse rohkem serif perekonna fonte. Seega näiteks printerile suunatud CSS-is võiks kaaluda sellist fontide kombinatsiooni:

font-family: "Times New Roman", Times, serif;

Atribuut: font-style

Määratleb selle, kas tekst peaks olema kaldkirjas (e. kursiivkiri, kursiivis). Võimalikud väärtused:

Näited:

font-style: italic;

Atribuut: font-variant

Määratleb selle, kuidas kuvada väikseid tähti. Annab väga huvitava efekti, võimalikud väärtused:

Näited:

font-variant: small-caps;

Atribuut: font-weight

Määratleb selle, kas tekst tuleks kuvada paksuna e. rasvases kirjas. Kuigi standard lubab kasutada paksuse erinevaid tasemeid, ei ole nende väärtustega üldjuhul midagi teha, kuna lehitsejad/platvormid ei toeta nii erinevaid võimalusi ühe fondi piires. Võimalikud väärtused:

Standardsed, kuid vähekasulikud väärtused:

Näited:

font-weight: bold;

Atribuut: font-size

Võimaldab määrata fondi suuruse, mille määramiseks kasutatakse üldjuhul erinevaid mõõtühikuid (piksel px, punkt pt, protsent %, em). Võimalikud väärtused on siiski laiemad:

Atribuut: line-height

Määratleb rea kõrguse. Kasutada võib nii numbrilist väärtust, väärtust protsentides või mõõtühikutes. Võimalikud väärtused:

Näited:

Näiteks väljatrükil on tihtipeale standardseks nõudeks reakõrgus 1.5. Selle saavutamiseks võikski printerile mõeldud CSS-faili kirjutada sellise koodi

line-height: 1.5

© Margo Munner | Sisukaart