Fondid
Fontidel ja kirjastiilidel on kodulehe loomise juures väga oluline roll.
Fondid, mida kõik veebilehitsejad toetavad, on leitavad siit.
Google font
Lehel on võimalik kasutada Google’i poolt pakutavaid fonte:
<head> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia"> <style> body { font-family: "Sofia", sans-serif; } </style> </head>
Google fondid on leitavad siit.
Soovitavad fontide kombinatsioonid (missuguseid kasutada pealkirjades ja missuguseid tekstis) on leitavad siit.
Fondi kujundamine
Fondi puhul on võimalik määrata, kas tekst on tavaline või kursiivis, kasutades omadust font-style:
<head>
<style>
#ERR
{
font-style: normal;
}
</style>
<head>
Võimalikud väärtused on:
normal – tavakirjas tekst
italic – kursiivkirjas tekst
oblique – sarnaneb kursiivkirjas tekstiga, kuid seda toetatakse vähem.
Lisaks saab määrata, kas fondi paksust, kasutades omadust font-weight:
<head>
<style>
#ERR
{
font-weight: bold;
}
</style>
<head>
Võimalikud väärtused on:
normal – tavakirjas tekst
bold – kursiivkirjas tekst
Ja üks omadus, mille muutmist tuleb samuti aeg-ajalt teostada, on kirja suurus, font-size:
<head>
<style>
#ERR
{
font-size: 16px;
}
</style>
<head>
Kirja suuruseks saab kasutada erinevaid mõõtühikuid:
px – pikslit, vaikimisi tekstisuurus on 16px
em – kirjasuurus, mis kohandub vastavalt kasutaja veebilehitseja seadetega, vaikimisi väärtus 1em, kusjuures 1em = 16px
vw – ekraanisuurusega kohanduva kujunduse puhul ekraaniala laius (viewwidth), 1vw = 1/100 ekraaniala laiusest
Tähti on võimalik ka suuremaks ja väiksemaks muuta, kasutades omadust font-stretch:
<head>
<style>
#ERR
{
font-stretch: condensed;
}
</style>
<head>
Võimalikud väärtused:
condensed – tähed on kokkusurutud
normal – tähed on tavakirjas
expanded – tähed on väljavenitatud
Varju tekitamine, omadusega text-shadow:
<head>
<style>
#ERR
{
text-shadow: 2px 4px 2px red;
}
</style>
<head>
2px – varju nihutatus horisontaalses suunas (NB! Väärtused võivad olla ka negatiivsed)
4px – varju nihutatus vertikaalses suunas (NB! Väärtused võivad olla ka negatiivsed)
2px – varju hajutatus
red – varju värv