[CSS] Configurare fonturi

[ActiON_]

Configurarea fonturilor

Alegerea potrivita a fonturilor si folosirea acestora in cadrul paginilor web este importanta, poate atrage critici si comentarii din partea vizitatorilor, mai ales daca formatarea clasica prin scris normal, aldin sau cursiv nu este folosita corespunzator. CSS include facilitati de control asupra aspectului fonturilor, prin posibilitatea de a stabili familia de fonturi, atributele ingrosat si inclinat, dimensiunea literelor precum si spatiul dintre linii.
Exista cinci familii de fonturi de baza:

-serif – au un ornament (serif) plasat la terminatia literei, care ii ofera o distinctie speciala. Sunt folosite pentru tiparire, chiar daca textele sunt mai mari sau mai mici. Nu sunt indicate pentru afisarea textelor pe ecran.
-sans serif – sunt fonturi care nu folosesc serife, fiind indicate pentru continut text general.
-monospace – fonturile monospatiate pot avea serife, ele se deosebesc prin faptul ca fiecare litera ocupa aceeasi cantitate de spatiu. Sunt cele mai indicate pentru textele care trebuie citite cu exactitate, ca de exemplu liniile de program.
-cursive – imita scrisul de mana, intr-o maniera stilizata. Sunt indicate in scopuri decorative, nefiind recomandate pentru scrierea unor texte mai lungi.
-fantasy – nu se incadreaza in nici una dintre categoriile de mai sus, fiind fonturi care au un caracter predominant ornamental (reprezentand ilustratii sau pictograme).

1. Stabilirea fontului

Fontul folosit pentru afisarea unui text poate fi stabilit prin proprietatea "font".
Pentru definirea fontului in cadrul unei reguli, trebuie specificata, dupa selectorul din cadrul foii de stil, proprietatea font-family urmata de numele fontului sau a fonturilor (despartite prin virgula). Este bine ca numele fonturilor sa fie incadrate intre ghilimele simple sau duble, mai ales daca numele acestora contine spatii.
Forma generala fiind urmatoarea:

Code: [Select]

selector { font-family:"nume_font1", "nume_font2", ..., nume_generic }

- Dupa ultima virgula se pot folosi urmatoarele nume generice de fonturi: "serif", "sans-serif", "cursive", "monospace" sau "fantasy". Includerea unei asemenea valori este optionala, insa recomandata.
Iata un exemplu practic:

Code: [Select]

h1 { font-family:"Arial", "Helvetica", sans-serif }

Cand este specificata o lista de fonturi, navigatorul incearca sa foloseasca primul font din lista, daca nu este gasit parcurge lista pana in momentul in care intalneste un font instalat. Daca nu exista fonturi echivalente, textul va fi afisat cu fontul prestabilit de browser. Daca este specificat un nume generic, textul va fi afisat cu un font apartinand aceluiasi stil, in cazul in care fonturile specificate in lista nu sunt disponibile.
Exista posibilitatea folosirii unei palete largi de fonturi in crearea paginilor web, nu doar a celor din lista limitata a fonturilor compatibile cu navigatoarele. Solutia consta in inglobarea fontului in cadrul paginii si trimiterea lui in mod automat in calculatorul vizitatorului, adica, descarcarea si folosirea lui automata.
Pentru a ingloba un font intr-o pagina si a-l descarca, se foloseste intructiunea @font-face. Aceasta trebuie sa includa proprietatea font-family, urmata de numele fontului si apoi trebuie indicata locatia pe server de unde poate fi descarcat fontul respectiv.
Codul CSS este urmatorul:

Code: [Select]

@font-face { font-family:nume_font src: url(locatie_font); }

Nu poate fi ales orice font pentru a fi descarcat, acesta trebuie sa respecte un anume format. Totusi, problema este ca nu exista un format valabil pentru toate navigatoarele, de exemplu Internet Explorer foloseste fonturi in format "eof" (obtinute cu ajutorul unui program numit WEFT), iar Mozilla foloseste un format "otf".

2. Stabilirea dimensiunii fontului

Cu ajutorul CSS se poate stabili dimensiunea fontului folosind valori absolute (exprimate in diferite unitati de masura: pixeli, centimetri), procentuale, sau chiar relative.
Pentru a defini dimensiunea fontului in cadrul unei reguli trebuie specificata proprietatea font-size urmata de o valoare a dimensiunii care poate lua una din urmatoarele tipuri de valori:
- unitate de masura - exprimata in pixeli, puncte, inci sau centimetri
- expresie absoluta - xx-small, x-small, small, medium, large, x-large si xx-large
- expresiile smaller sau larger, ca raport cu elementul parinte
- procent - un numar exprimat in procente (cu %), care indica marimea textului in raport cu dimensiunea elementului parinte

Iata forma generala a codului CSS pentru stabilirea dimensiunii fontului:

Code: [Select]

selector { font-size:valoare }

Este bine ca pentru foile de stil care formateaza iesirea la imprimanta sa se foloseasca ca unitati de masura punctele, cm sau mm.
Pixelii reprezinta, probabil, cea mai des utilizata unitate de masura pentru stabilirea dimensiunii fontului. Pixelii nu reprezinta o masura foarte sigura, dar, de obicei, pentru afisarea pe ecran, constituie o masura mai sigura decat dimensiunea in puncte.
Iata un exemplu practic exprimat in pixeli:

Code: [Select]

h1 { font-size:15px; }

3. Text inclinat

Atributul "font-style" permite scrierea textelor inclinate in doua moduri: "cursiv" si "oblic". Notiunile pot fi confundate, insa cursivul se refera la versiunea unui font a carui caractere au o inclinare spre dreapta, iar oblicul este un font inclinat fortat spre dreapta.
Pentru a crea caractere cursive in cadrul unei reguli trebuie precizata proprietatea font-style, astfel:

Code: [Select]

selector { font-style:valoare }

Unde "valoare" poate fi unul din urmatoarele cuvinte: normal, italic sau oblique
Iata un exemplu:

Code: [Select]

h1 { font-style:italic; }

Valoarea ''normal'' se poate folosi pentru a sterge formatarea cu caractere inclinate atunci cand aceasta este mostenita.

4. Grosimea fontului

Ingrosarea este una dintre metodele utilizate des pentru scoaterea in evidenta a unui text. CSS confera mai multa flexibilitate in utilizarea textului ingrosat decat elementul HTML <b>, prin posibilitatea introducerii unei valori proprietatii font-weight, dupa cum urmeaza:

bold – scrie fontul folosind caractere ingrosate
bolder - mareste grosimea fontului relativ la grosimea curenta
lighter – micsoreaza grosimea fontului fata de grosimea curenta
- o valoare cuprinsa intre 100 si 900 (multiplu de 100) – reprezinta valoarea ingrosarii, bazata pe versiunile alternative disponibile ale fontului
normal – elimina formatarea cu caractere aldine (ingrosate)

In cazul folosiri valorii cuprinse intre 100 si 900, 400 reprezinta valoarea corespunzatoare textului normal, iar 700 valoarea ingrosarii pentru stilul aldin. Majoritatea fonturilor nu dispun de noua ponderi, astfel ca daca este specificata o valoare care nu este disponibila, va fi folosita o alta pondere.
Forma generala pentru stabilirea grosimii fontului este urmatoarea:

Code: [Select]

selector { font-weight:valoare }

Iata un exemplu practic:

Code: [Select]

h1 { font-variant:small-caps; }

5. Majuscule mici

Majusculele mici sunt folosite de obicei in cadrul titlurilor, ele fiind obtinute prin convertirea literelor mici in majuscule cu o dimensiune mai mica decat majusculelor normale. Astfel se obtin cuvinte in care toate literele sunt scrise cu majuscule insa prima litera este mai inalta decat celelalte.
Stabilirea unei reguli pentru majuscule mici se realizeaza prin utilizarea proprietatii font-variant cu valoarea small-caps. Prin folosirea valorii normal, vor fi anulate celelalte valori mostenite ale proprietatii font-variant.
Forma generala este urmatoarea:

Code: [Select]

selector { font-variant:valoare }

Iata cum formatam un text dintr-o eticheta "h1" cu valoarea "small-caps":

Code: [Select]

h1 { font-variant:small-caps; }

6. Valori multiple pentru font

Deseori este util sa fie precizate toate elementele fontului intr-o singura definitie.
Pentru a se realiza acest lucru este folosita proprietatea "font" urmata de valorile pentru celelalte proprietati, separate prin spatiu.
Sintaxa generala este urmatoarea:

Code: [Select]

selector { font:val_font-family val_font-style val_font-variant val_font-weight val_font-size val_height }

Daca o anumita valoare din lista este omisa, navigatorul va folosi valoarea prestabilita.
Iata si un exemplu practic de folosire a mai multor valori in aceeasi definitie:

Code: [Select]

h1 { font:"Arial",sans-serif italic small-caps bold 14pt; }

Sursa: marplo.net