Front-end fejlesztés

A font face szabály

Korántsem mondhatnám, hogy CSS3-at már minden böngésző könnyűszerrel kezeli, addig nem is fogom ezt mondani, amíg olyan egyszerű dolgokra, mint egy szimpla border radius-szal az Internet Explorer csak jQuery pluginnal birkózik meg, ha minden jól megy. IE6-ról pedig ne is beszéljünk, mert ugyebár azt tudjuk, hogy ő soha nem lesz képes már ilyen dolgokra.

Amikor elkészül egy web design, akkor az első sitebuilder probléma, amivel szembesültem életem során az betűtípus probléma volt. Hiszen a web designon olyan szépen néz ki, amikor egy letisztult betűtípus fogad minket. A szemnek is könnyebb és nagyon esztétikussá teszi az oldalt. Több lehetőség közül választhatunk, hogy ezt a weben is megvalósítsuk.

Példának okáért itt a SIFR, amely flash alapú, tehát nálam már itt bukott ez a megoldás, mert azon felül, hogy nem mindenkinek van a gépén flash telepítve, úgy látom meglehetősen lassítja az oldalt. Ezt tapasztalatból mondom. A második lehetőség, amelyet számba veszek az a Cufon. Ezt már hatékonyabb megoldásnak tartom. De ez sem a gyorsaságáról híres. A JS fájl amit le kell generálnunk néha elég nagy, ha minden karaktert bele szeretnénk venni. Ezen felül, ami nagyon idegesítő, hogy a szöveget nem tudjuk kijelölni és másolni.

A @font-face vitte el számomra az „aranypálmát”. Ez egy CSS3 szabály. Az egész trükkre ugyebár azért van szükségünk, mert az adott font-ot beállítjuk a CSS-ben attól még azon látogatóknál, akiknek nincs fent a gépén a betűtípus annak nem fog úgy megjelenni. Egy font-face szabály az alábbiak szerint néz ki:

@font-face {
    font-family: "Myriad Pro Light";
    src: url('Myriad-Pro-Light.otf');
}

Látható, hogy a szerveren tároljuk a betűtípust így mindenkinél meg fog jelenni normálisan. Jelenne, pontosabban, ha egy böngésző lenne a világon. De mivel több van ezért cross browser megoldást kellett találnom. Van egy font-face generátor, amit nagyon szívesen ajánlok mindenkinek. Segítségével olyan kódot tudunk generálni, amely minden egyes böngésző alatt ugyanazt a böngésző élenyt tudja nyújtani a felhasználóknak. Még IE6 alatt is!

Jogi problémák felléphetnek egyes fontok esetében. Tehát csak olyan fontot használjunk így, amely licenszében ez engedélyezett. Ugyanott ahol a generátor van, találtok fontokat is. Ha már a web design kialakítása során ügyelünk a betűtípusokra és nem egyből a Myriad Pro-hot nyúlunk például, akkor saját munkánkat tudjuk megkönnyíteni. Egyedi betűtípusokra fel, éljen a @font-face!