Varianta obișnuită pentru definirea fonturilor arată aproximativ așa:
body {
font-family: Arial, Helvetica, sans-serif;
}Aici elementului body i se atribuie fontul Arial. În cazul în care acesta nu este disponibil pe sistemul vizitatorului, se va trece la Helvetica. Dacă nu este disponibil nici Helvetica, browserul va fi instruit să folosească cel puțin un font fără serife. Controlul efectiv nu este posibil. Prin urmare, nu aveți un control real asupra rezultatului final. Așadar, ceea ce ați pregătit frumos în GIMP sau Photoshop s-ar putea să se piardă în jungla fonturilor. Mai multe despre cum poate fi rezolvată această problemă vor fi discutate mai jos.
Însă mai întâi, revenind la varianta clasică. Mai jos, găsiți o definiție tipică care ajustează aspectul fundamental al paginii web. Prin definiția body, puteți stabili inițial informațiile de bază despre fonturi.
body {
font-family: Georgia, Times, "Times New Roman", serif;
color: #000;
font-size: 1.1em;
line-height: 150%;
}
p {
font-size: 1.1em;
}
Desigur, puteți stiliza fiecare element al paginii în mod individual. Acest lucru include, de exemplu, titlurile, pasajele în italic etc. În această privință, gândiți-vă din nou la principiul de moștenire al CSS.
h1 {
font-size: 1.6em;
}Rezultatul ar putea arăta așa în browser:
Utilizarea fonturilor web
Problematica definițiilor tradiționale ale fonturilor este evidentă: În final, nu puteți fi cu adevărat siguri că fontul specificat de dvs. este disponibil pentru vizitator. În cazul în care browserul nu găsește fontul, va alege unul asemănător cu cel dorit de dvs. Nu aveți control real asupra rezultatului. Exact în acest punct, @font-face vine în ajutor. Prin intermediul acestuia, puteți specifica în mod explicit un font care trebuie utilizat. Funcționează fundamental la fel ca și în cazul imaginilor. Deci, trebuie să specificați calea către fișierul fonturilor.
În browserele moderne se folosesc așa-numitele fonturi web WOFF pentru @font-face. Aceste fonturi sunt mult mai mici decât formatele de fonturi web folosite anterior, EOT și TTF.
O definiție tipică de @font-fac arată astfel:
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
Numele fontului de utilizat este specificat la font-family. Până aici, nu există particularități de sintaxă. Prin src:url() se specifică URL-ul la care se află fișierul fontului web. Dacă există posibilitatea ca fontul să fie disponibil pe computerele utilizatorilor, este recomandat să specificați și local. În acest local, se atribuie numele fontului.
@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");
}
După definiția @font-face, fonturile web pot fi utilizate apoi în mod normal.
h1 {
font-family: "Bitstream Vera Serif Bold";
font-size: 1.2em;
color: #3399FF;
}Aici puteți găsi fonturi web, de exemplu
Rămâne desigur întrebarea de unde puteți obține fișierele de fonturi web corespunzătoare. Google găzduiește de exemplu numeroase astfel de fonturi web pe pagina http://www.google.com/fonts.
Aceste fonturi pot fi integrate direct folosind pagina menționată.
O solicitare corespunzătoare ar arăta așa:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
În font-family se specifică fontul web dorit. Pe pagina menționată de Google găsiți aceste nume și apeluri. După ce ați integrat fontul web, acesta poate fi apoi aplicat ca orice alt font.
body {
font-family: 'Tangerine', serif;
font-size: 1.2em;
}Cei care doresc își pot folosi pe site mai multe fonturi web. Pentru acest lucru, trebuie să dați clic pe http://www.google.com/fonts la fonturile web dorite și să apăsați pe Adăugați la colecție. După ce toate fonturile web sunt în propria colecție, accesați Utilizare în partea de jos a paginii. Acolo va fi afișat direct un fel de vitezometru.
Prin această ilustrație, puteți observa efectele pe care le are integrarea fonturilor web asupra timpului de încărcare al paginii. Aceste efecte sunt cu adevărat măsurabile și cresc odată cu fiecare font web adăugat în plus.
Cât de ușor este să folosiți mai multe fonturi web pe care le-ați adăugat anterior în colecția dvs., este demonstrat în următorul exemplu:
<link href="http://fonts.googleapis.com/css? family=Henny+Penny|Eagle+Lake|Amarante|Plaster|Courgette" rel="stylesheet" type="text/css">
Fonturile web individuale sunt enumerate unul lângă altul, separate printr-o linie verticală. Apelul complet care se potrivește cu colecția aleasă este afișat pe pagina de utilizare deja menționată.
Multe dintre fonturile web oferă așa-numitele subansambluri precum Latin sau chirilic. Pentru a le include explicit, se specifică subansamblul dorit ca valoare a parametrului.
http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic
Dacă se dorește utilizarea mai multor dintre aceste subansambluri, acestea sunt enumerate separate prin virgulă.
http://fonts.googleapis.com/css?family=Philosopher&subset=latin,cyrillic
Utilizarea acestor fonturi web este totuși controversată dintr-un cu totul alt context. În primul rând, la accesarea paginii se stabilește o conexiune către un server Google. Aceasta poate fi evitată descărcând fișierul fontului web și încărcându-l pe propriul server. În orice caz, acordați întotdeauna atenție termenilor de utilizare a fonturilor web pe care doriți să le utilizați în acest fel.
Definiția fontului de text a paginii de exemplu
Mai jos găsiți definițiile fonturilor pe care le voi folosi pentru pagina de exemplu actuală:
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;
}
Desigur, puteți adăuga elemente suplimentare. În acest caz, totuși, această sintaxă este suficientă.
