In acest articol vom vorbi despre modul in care putem sa folosim fonturi non-standard in paginile web. Cu totii stim ca atunci cand alegem fontul pentru un proiect, trebuie sa avem grija ca acesta sa fie unul care se gaseste pe toate (sau majoritatea) calculatoarelor. Mai mult, de cele mai multe ori, desi folosim un font precum Arial tot trecem si familia generala sans-serif in eventualitatea ca ar exista vreun calculator care sa nu aiba acest font instalat.
CSS vine in ajutorul nostru si ne permite sa importam orice font dintr-o locatie de pe disc. Astfel, nu mai avem nevoie sa ne limitam la cele cateva fonturi “web safe” si nu mai trebuie sa folosim imagini pentru titluri mai deosebite. Deci cum functioneaza?
Mai intai trebuie sa identificam fontul pe care dorim sa-l folosim. Eu am ales Elder Gods de pehttp://www.1001freefonts.com. Am folosit urmatorul markup:
<!DOCTYPE html> <html> <head> <title>Sa ne jucam cu font-uri</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> </head> <body> <div id="wrapper"> <h1>Fonturi diverse cu CSS3</h1> </div> </body> </html>
Rezultatul va arata asa:
Acum sa vedem cum arata style.css:
@font-face {
font-family: ElderGods;
src: url('ElderGodsBB.ttf');
}
#wrapper {
width: 600px;
margin: auto;
}
#wrapper h1 {
font-family: ElderGods;
font-size: 3em;
text-shadow: 1px 1px 3px #ccc;
}
Si rezultatul:
Ce trebuie observat aici. Avem sintaxa @font-face cu ajutorul careia initializam un nou font pe care il numim ElderGods (puteam sa-i punem orice alt nume). Asa cum se poate intui, src indica sursa pentru fontul initializat la linia de mai sus. Veti vedea, de asemenea, ca fontul este folosit in cadrul tag-ului h1 din div-ul cu id “wrapper”. Proprietatea text-shadow nu era necesara, dar voiam sa demonstrez ca fontul custom poate fi manipulat la fel ca oricare altul.
Dupa cum va puteti da seama, acesta este un pas foarte important catre un web mai bun. Sa vedem cateva avantaje ale folosiri font-urilor proprii in loc de imagini. Primul, si poate cel mai important, este ceea ce ne framanta pe noi toti: SEO. Cu totii stim ca motoarele de cautare indexeaza mult mai bine continutul text, decat atributele alt sau title pe care le puneam pana acum la imagini pentur ca compensa acest lucru.
De asemenea, trebuie sa tinem cont ca din varii motive, utilizatorii pot avea imaginile dezactivate in browser. Este adevarat ca in ultimul timp asta se intampla destul de rar, dar de ce sa nu le oferim si acestor persoane o experienta la fel de placuta?
Si mai e ceva. Un aspect pe care nu stiu cati dintre noi il iau in calcul cand dezvolta un site: accesibilitatea. Persoanele cu dizabilitati de vedere folosesc unelte speciale care citesc automat textul de pe ecran. Acestea pot oferi o experienta mult mai precisa atunci cand trebuie sa citeasca text cursiv si nu vreun atribut alt sau title.
Aceasta este functionalitatea de baza a lui @font-face. Rezultatul il puteti descarca de aici. Intr-un articol viitor vom folosi aceasta tehnica intr-un mod mai creativ pentru a obtine niste efecte interesante.