A klasszikus webfejlesztés egyik legfájóbb pontja, hogy csak olyan betűtípusokkal érdemes tervezni, amik a legtöbb gépen előtelepítve megtalálhatóak. A nemsokára megjelenő IE9 támogatja a @font-face CSS elemet, és ezzel lehetővé teszi Web Fontok, azaz a webről “maguktól letöltődő” betűkészletek használatát. Íme egy példa:
@font-face {
font-family: SajatFont;
src: url("LeagueGothic.woff");
}
Ezzel definiáltuk, hogy a webhelyünk gyökerében található LeagueGothic.woff állományban található betűkészletet akarjuk használni a weboldalon, és a továbbiakban SajatFont néven akarunk rá hivatkozni. Valahogy így:
<!DOCTYPE html>
<html>
<head>
<title>IE9 WOFF DEMO</title>
<style>
@font-face
{
font-family: SajatFont;
src: url("LeagueGothic.woff");
}
</style>
</head>
<body>
<h1>IE9 WOFF (Web Open Font Format) DEMO</h1>
<p style="font: 20pt SajatFont">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</body>
</html>
Ha a fenti weboldalt IE9-ben nézem meg a következő látvány fogad:
Az első “lorem ipsum...” sor az új, nem alapértelmezett, hanem a “weboldalról letöltődő” betűkészlettel jelenik meg, a második sor pedig a megszokott, unalmas, default betűcsaláddal.
Sorozatunk következő részében a webes használatra alkalmas betűkészletek kereséséről és beüzemeléséről lesz szó.