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:

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:

- 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:
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: 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:

Iata forma generala a codului CSS pentru stabilirea dimensiunii fontului: 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:
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:

Unde "valoare" poate fi unul din urmatoarele cuvinte: normal, italic sau oblique
Iata un exemplu:
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:

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: Iata un exemplu practic:
h1 { font- weight:bold; }

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:

Iata cum formatam un text dintr-o eticheta "h1" cu valoarea "small-caps":
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:

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:
h1 { font:"Arial",sans-serif italic small-caps bold 14pt; }

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tag se foloseste pentru a adauga liste in elemente <ul> si <ol>?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>
Care valoare a proprietatii "display" seteaza elementul ca tip bloc si afiseaza un punct in fata?
block list-item inline-block
.some_class {
  display: list-item;
}
Care instructiune JavaScript transforma un obiect in sir JSON.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicati clasa PHP folosita pentru a lucra cu elemente HTML si XML in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Indicati forma de Prezent Continuu a verbului "to live" (a trai /a locui)
lived living liveing
I`m living here.
- Traiesc /Locuiesc aici.
Care este forma de Gerunziu (sau Participiu Prezent) a verbului "vivir" (a trai /a locui)?
vivió vivido viviendo
Estoy viviendo aquí.
- Traiesc /Locuiesc aici.
Configurare fonturi

Last accessed pages

  1. Articolul din limba engleza - The article (774)
  2. Backgammon (684)
  3. Gramatica limbii engleze - Prezentare Generala (2488)
  4. Trecutul simplu si continuu - Past Tense Simple and Continuous (1393)
  5. Clasificarea adverbelor - Adverbs classification (195)

Popular pages this month

  1. Bubbles3 (3188)
  2. Gramatica limbii engleze - Prezentare Generala (2485)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (2253)
  4. Butterfly Kyodai (2022)
  5. Zuma Deluxe (1953)