HTML ja CSS algajatele (osa 45): Stiilsed fondid veebilehele

Tavaline viis kirjatüüpide määratlemiseks näeb umbes järgmiselt välja:

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

Siin määratakse body-elemendile kirjatüübiks Arial. Kui seda kasutajal süsteemis pole, kasutatakse vaikimisi Helvetica. Kui ka Helvetica't pole saadaval, siis juhitakse veebilehitsejat kasutama vähemalt serifideta kirjatüüpi. Tegelikult seda täielikult kontrollida ei saa. Niisiis, lõpptulemuse üle teil tõelist kontrolli ei ole. See, mida te GIMPis või Photoshopis niiväga kenasti kokku seadsite, võib kirjatüübipolitseis kaduma minna. Kuidas selle probleemi lahendamiseks edasi saab, sellest aga pärast.

Aga kõigepealt tagasi klassikalise vaatenurga juurde. Allpool leiate tüüpilise definitsiooni, millega kohandatakse veebisaidi põhivälimust. body-definitsiooni abil saate algselt määratleda põhikirjeldused.

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

Mõistagi saate lehekülje individuaalseid osi eraldi kujundada. Selle hulka kuuluvad näiteks pealkirjad, kaldkirjas lõigud jne. Kuid selle juures ärge unustage CSS pärinemise põhimõtet.

h1 {
   font-size: 1.6em;
}

Lehitsejas võib tulemus välja näha järgmiselt:

Webifontide kasutamine

Probleem traditsiooniliste kirjatüüpide määratlemisel on ilmne: lõppkokkuvõttes ei saa te tõesti kindel olla, et teie määratud kirjatüüp on vaatajale saadaval. Kui brauser ei leia kirjatüüpi, valib see tavaliselt midagi sarnast sellele, mida te soovisite. Seega teil pole tulemuse üle tegelikult tõelist kontrolli. Just siin tuleb appi @font-face. Selle kaudu saate täpselt määrata, millist kirjatüüpi kasutada. Põhimõtteliselt töötab see samamoodi nagu piltide puhul. Tuleb seega määrata tee kirjatüübi failini.

Uuemates brauserites kasutatakse @font-face puhul nn WOFF-veebifonte. Need fondid on oluliselt väiksemad kui varasemad kasutatavad veebifondi formaadid EOT ja TTF.

Tüüpiline @font-face-definitsioon näeb välja järgmiselt:

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

Kirjatüübi nime määratakse font-family all. Siiani pole siin vaja süntaksispetsiifilisusi. src:url() abil määratakse URL, kus veebifondi fail asub. Kui teoreetiliselt on võimalik, et kasutajate arvutites on kirjatüüp juba olemas, peaksite lisaks märkima ka local. Sellele local'ile määratakse kirjatüübi nimi.

@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");
}

Pärast @font-face'i definitsiooni saab veebifonde kasutada nagu tavalisi kirjatüüpe.

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

Siin on näiteks saadaval veebifondid

Küsimus tekib muidugi, kust leida vastavad veebifondi failid. Näiteks Google hoiab suurt hulka neist veebifontidest oma lehel http://www.google.com/fonts.

Neid veebifonte saab otse nimetatud lehelt sisse võtta.





Vastav kutse näeks välja umbes selline:

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

font-family'sse määratakse soovitud veebifont. Nimed ja kutsed leiate nimetatud Google'i lehelt. Kui olete veebifondi sisse andnud, saab seda kasutada nagu iga teist kirjatüüpi.

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

Kui soovite, võite oma leheküljel kasutada mitut veebifonti. Selleks klõpsake soovitud veebifontide jaoks Google'i lehel http://www.google.com/fonts nuppu Add to Collection. Kui kõik veebifondid on teie kogus, klõpsake allosas nuppu Use. Seal kuvatakse otse tüüp tuletist.

Kuidas on võimalik kasutada mitut veebifonti, mida varem oma kollektsiooni lisasite, näitab järgmine näide:

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

Iga veebifont on eraldatud vertikaalse kriipsuga ja kirjutatakse järjest. Kogu valitud kollektsiooni vastav kutse kuvatakse juba nimetatud Kasuta-lehel.

Paljud veebifondid pakuvad nn alamhulki, nagu ladina või kirillitsa. Nende lisamiseks eraldi määratakse soovitud alamhulk parameetri väärtusena.

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

Kui soovitakse kasutada mitut sellist alamhulka, tuleb need eraldada komadega.

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

Siiski on selle veebifondi kasutamine täiesti erinevas kontekstis küsitav. Kõigepealt peab lehe kutsumisel looma ühenduse Google'i serveriga. Sellest saab mööda minna, laadides alla veebifondifaili ja laadides selle oma serverisse üles. Siiski tuleb igal juhul tähelepanu pöörata veebifontide kasutustingimustele, mida soovite sel viisil kasutada.

Näidislehe kujatise määratlus

Allpool on esitatud kujatiste määratlused, mida kasutan praegusel näidisveebilehel:

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;
}

Mõistagi võite lisada täiendavaid elemente. Praegusel juhul on see süntaks aga täielikult piisav.