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:

• inherit
• normal vaikeväärtus, kiri ei ole kursiivis;
• italic kiri on kursiivis;
• oblique

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:

• inherit
• normal vaikeväärtus;
• small-caps

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:

• inherit
• normal
• bold

Standardsed, kuid vähekasulikud väärtused:

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

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 %, ekraan mõõtühik em). Võimalikud väärtused on siiski laiemad:

• inherit
• medium vaikeväärtus;
• normal
• small
• smaller
• xx-small
• x-small
• large
• larger
• x-large
• xx-large

Näited:

Kõikide järgnevate näidete rakendamisel peaks tulemus olema identne. Siiski on soovitatav kasutada fondi suuruse juures ühikuid ekraani mõõtühikutes.

font-size: 0.8em;

font-size: 80%;

font-size: 13px;

font-size: small;

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:

• inherit
• normal

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