HTML in CSS za začetnike (Del 45): Elegantne pisave za stran

Običajna varianta za določanje pisav je v grobem naslednja:

body {
   font-family: Arial, Helvetica, sans-serif;
}

Tukaj je za element body določena pisava Arial. Če te na sistemu gledalca ni, se uporabi Helvetica. Če tudi te ni na voljo, brskalniku naročite, naj uporabi pisavo brez serifov. V resnici tega ni mogoče popolnoma nadzorovati. Na koncu torej nimate pravega nadzora nad končnim rezultatom. Torej, tisto, kar ste lepo pripravili v programih GIMP ali Photoshop, morda izgine v gozdu pisav. Več o tem, kako rešiti to težavo, pa bo navedeno pozneje.

Najprej pa nazaj k klasični varianti. Spodaj najdete tipično definicijo, prek katere se prilagodi osnovni videz spletne strani. Z definicijo body lahko najprej določite osnovne pisave.

body {
   font-family: Georgia, Times, "Times New Roman", serif;
   color: #000;
   font-size: 1.1em;
   line-height: 150%;
}
p {
   font-size: 1.1em;
}

Seveda lahko ločeno oblikujete posamezne elemente na strani. Sem spadajo na primer naslovi, poševna besedila in podobno. Pri tem pa pomislite na dedovanje v CSS.

h1 {
   font-size: 1.6em;
}

Rezultat v brskalniku bi lahko bil takšen:

Izrabiti spletne pisave

Težava pri klasičnem določanju pisav je očitna: Nazadnje res ne morete biti prepričani, da je navedena pisava dejansko na voljo gledalcu. Brskalniki v dvomu izberejo pisavo, ki je podobna tisti, ki ste jo želeli. Tako dejansko nimate pravega nadzora nad rezultatom. Prav v tem trenutku pa @font-face ponuja rešitev. Prek tega je mogoče izrecno določiti pisavo, ki jo želite uporabiti. Deluje načeloma enako kot pri slikah. Navesti je treba pot do datoteke pisave.

V sodobnih brskalnikih se za @font-face uporabljajo t. i. WOFF-spletne pisave. Te pisave so veliko manjše od prej uporabljenih oblik spletnih pisav EOT in TTF.

Tipična definicija @font-face izgleda takole:

@font-face {
   font-family: "Bitstream Vera Serif Bold";
   src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}

Ime uporabljene pisave se določi pri font-family. Do sem torej začuda ni nobenih posebnosti v sintaksi. Prek src:url() se navede URL, kjer je datoteka spletnih pisav. Če obstaja možnost, da je pisava na računalnikih uporabnikov na voljo, je priporočljivo dodati local. Temu lokalnemu dodelite ime pisave.

@font-face {
   font-family: "Bitstream Vera Serif Bold";
   local: "Bitstream Vera Serif Bold";
   src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}

Po definiciji @font-face se lahko spletne pisave uporabljajo povsem običajno.

h1 {
   font-family: "Bitstream Vera Serif Bold";
   font-size: 1.2em;
   color: #3399FF;
}

Tukaj so na voljo spletne pisave

Seveda se postavi vprašanje, od kod pridobiti ustrezne datoteke spletnih pisav. Google na primer gosti številne te spletne pisave na strani http://www.google.com/fonts.

Te pisave je mogoče neposredno vključiti prek navedene strani.





Primer takšnega klica bi bil:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

Pri font-family se navede želena spletna pisava. Na omenjeni strani Googla najdete imena in klice. Ko je spletna pisava vključena, se jo lahko uporabi enako kot katero koli drugo pisavo.

body {
   font-family: 'Tangerine', serif;
   font-size: 1.2em;
}

Kdor želi, lahko na svoji strani uporabi več spletnih pisav. Za to kliknite na strani http://www.google.com/fonts na želene spletne pisave gumb Dodaj v zbirko. Ko so vse spletne pisave v vaši zbirki, na dnu strani pokličite Uporabi. Tam se prikaže skoraj tachometer.





Na podlagi te slike lahko opazite vplive, ki jih ima vključitev spletnih pisav na čas nalaganja strani. Ti vplivi so dejansko merljivi in se z vsako dodatno spletno pisavo povečujejo.

Kako enostavno je uporabiti več spletnih pisav, ki ste jih prej dodali v svojo zbirko, prikazuje naslednji primer:

<link href="http://fonts.googleapis.com/css?
family=Henny+Penny|Eagle+Lake|Amarante|Plaster|Courgette" rel="stylesheet" type="text/css">

Posamezne spletne pisave so torej zapisane ločeno zaporedoma, ločene z navpično črto. Popoln klic, ki ustreza izbrani zbirki, je prikazan na že omenjeni strani uporabe.

Veliko spletnih pisav ponuja t. i. podzbirke, kot sta Latinica ali cirilica. Da bi jih izrecno vključili, določimo želeno podzbirko kot vrednost parametrov.

http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic

Če želite uporabiti več takih podzbirk, jih zapišete zaporedoma, ločene z vejico.

http://fonts.googleapis.com/css?family=Philosopher&subset=latin,cyrillic

Uporaba te spletne pisave pa je predvsem iz drugega vidika sporna. Najprej mora biti pri klicu strani vzpostavljena povezava s strežnikom Googla. Temu se lahko izognete z nalaganjem spletnih pisav in jih naložite na svoj strežnik. Pri tem pa bodite pozorni na pogoje uporabe spletnih pisav, ki jih želite uporabiti na ta način.

Opredelitev pisave za primer strani

Spodaj najdete opredelitve pisav, ki jih bom uporabil za trenutno primerjalno stran:

body {
   font-family: 'Crimson Text', Helvetica, sans-serif;
   color: #444;
   text-decoration: none;
   line-height: 1.5em;
   font-size: 1.2em;
}
p { 
   font-size: 1.1em;
}
h1 {
   font-size: 1.6em;
   color: #3399FF;
}

Seveda lahko dodate dodatne elemente. V trenutnem primeru pa je ta sintaksa povsem zadostna.