A betűtípusok megszokott definiálása kb. így néz ki:
body {
font-family: Arial, Helvetica, sans-serif;
}Ebben az esetben az body elemhez az Arial betűtípus van hozzárendelve. Ha ez nem áll rendelkezésre a néző rendszerén, akkor a Helvetica-ra tér vissza. Ha a Helvetica sem elérhető, akkor a böngészőnek utasítást adunk arra, hogy legalább egy seriffel nem rendelkező betűtípust használjon. Ezzel természetesen nincs igazi ellenőrzés. Tehát végül is nincs teljes kontroll a végeredmény felett. Amit szépen elrendeztetek GIMP vagy Photoshop-ban, az esetleg a betűdzsungelben eltűnhet. Erről és arról, hogy ez a probléma hogyan oldható meg, majd később lesz szó.
Először azonban térjünk vissza a klasszikus változathoz. Az alábbiakban látható egy tipikus meghatározás, amellyel az oldal alapvető megjelenése lesz testre szabható. A body meghatározással először az alapvető betűstílust állíthatjátok be.
body {
font-family: Georgia, Times, "Times New Roman", serif;
color: #000;
font-size: 1.1em;
line-height: 150%;
}
p {
font-size: 1.1em;
}
Természetesen az oldal elemzjeit is külön-külön formázhatjátok. Ide tartozik például a címsorok, dőlt szövegrészek stb. Ebben az összefüggésben azonban ne feledkezzetek meg a CSS öröklődési elvéről.
h1 {
font-size: 1.6em;
}A végeredmény a böngészőben kb. így néz ki:
Webfontok használata
A hagyományos betűtípusok definiálásánál a probléma nyilvánvaló: Végül is nem lehettek biztosak abban, hogy az általuk megadott betűtípus valóban elérhető-e a néző számára. A böngészők esetleg egy másikat választanak, ha nem találják meg a kívánt betűtípust. Így természetesen nincs igazi kontroll a végeredmény felett. Éppen itt nyújt segítséget az @font-face. Ennek segítségével a felhasználó által használni kívánt betűtípust egyértelműen meg lehet adni. Működése lényegében azonos a képekével. Azaz meg kell adni a betűtípusfájl elérési útvonalát.
A modern böngészők a @font-face-hez úgynevezett WOFF-webfontokat használnak. Ezek a betűtípusok jóval kisebbek, mint a korábban használt webfont formátumok, az EOT és a TTF.
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
A használandó betűtípus nevét a font-family résznél jegyzi fel. Eddig tehát nincsenek szintaktikai különlegességek. A src:url()-en keresztül meg kell adni az URL-t, ahol a webfont fájl elérhető. Ha elméletileg felmerülhet, hogy a betűtípus elérhető a felhasználók számítógépein, akkor érdemes kiegészíteni az instrukciókat a local szóval. A localhoz rendeld hozzá a betűtípus nevét.
@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");
}
A @font-face definíció után a webfontokat teljesen normál módon lehet használni.
h1 {
font-family: "Bitstream Vera Serif Bold";
font-size: 1.2em;
color: #3399FF;
}Itt találhatók például a webfontok
Felmerül a kérdés, hogy honnan lehet az adott webfont fájlokat szerezni. Például a Google számos ilyen webfontot hostol a http://www.google.com/fonts oldalon.
Ezen fontokat közvetlenül az említett oldalon keresztül lehet beágyazni.
Egy megfelelő hívás így nézhet ki:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
A font-family-ben a kívánt webfontot kell megadni. A fent említett Google oldalon ezeket a neveket és hívásokat találjátok. Miután beágyaztátok a webfontot, használható lesz, mint bármely más betűtípus.
body {
font-family: 'Tangerine', serif;
font-size: 1.2em;
}Az oldalon több webfont is használható, ha valaki szeretne. Ehhez menjen a http://www.google.com/fonts oldalon a kívánt webfontokhoz, majd kattintson a Add to Collection gombra. Ha minden webfont a saját gyűjteményben van, a lapon lent található Use opcióra kattintva egy tárcsaszerű eszközfelület jelenik meg.
Ezen ábrán látható, hogy milyen hatással van a webfontok beágyazása az oldal betöltési idejére. Ezek a hatások ténylegesen mérhetők és minden további webfonttal növekednek.
Hogyan lehet több webbetűtípust használni, amelyeket korábban a gyűjteményébe helyezett, azt a következő példa mutatja:
<link href="http://fonts.googleapis.com/css? family=Henny+Penny|Eagle+Lake|Amarante|Plaster|Courgette" rel="stylesheet" type="text/css">
Az egyes webbetűtípusokat tehát egymástól elválasztott függőleges vonallal írjuk egymás után. A választott gyűjteményhez tartozó teljes hívás a már említett Use-oldalon jelenik meg.
Sok webbetűtípus biztosít ún. részhalmazokat, mint például latin vagy cirill. Az ilyeneket kifejezetten be kell vonni, a kívánt részhalmazt paraméterként kell megadni.
http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic
Ha több ilyen részhalmazt szeretnél használni, akkor ezeket vesszővel elválasztva kell megadni.
http://fonts.googleapis.com/css?family=Philosopher&subset=latin,cyrillic
Az ilyen webbetűtípus használata azonban egyáltalán nem vitátlan. Először is kapcsolatot kell létesíteni az oldal betöltésekor a Google szerverével. Ez elkerülhető, ha letöltöd a webbetűtípus-fájlt és saját szerveredre töltöd fel. Minden esetben figyelj azonban a webbetűtípusok használati feltételeire, amelyeket ezen a módon kívánsz használni.
A példoldal betűdefiníciója
Alább találhatóak a betűdefiníciók, amelyeket az aktuális példoldalon fogok használni:
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;
}
Természetesen felveheted a további elemeket. Az aktuális esetben ez a szintaxis azonban bőven elegendő.
