Exista cinci familii de fonturi de baza:


1. Stabilirea fontului

Fontul folosit pentru afisarea unui text poate fi stabilit cu 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:

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

Utilizare fonturi personale

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 browser-ul vizitatorului.
Pentru a include un font intr-o pagina care sa fie transmis la vizitator, se foloseste intructiunea @font-face. Aceasta trebuie sa includa proprietatea font-family, cu numele fontului si proprietatea src cu locatia url a fontul respectiv.
Exemplu:

@font-face {
 font-family: 'Sansation_Light';
 src: url('Sansation_Light.ttf');
}

/* Dupa ce fontul e inclus, se poate folosi */
h1 {
 font-family: 'Sansation_Light', sans-serif;
}

Un font ca sa fie inclus trebuie sa respecte un anume format. Internet Explorer foloseste fonturi in format "eof" (obtinute cu ajutorul unui program numit WEFT), iar Mozilla, Chrome, Safari, si Opera support fonturi de tip OpenType Face (.otf) si TrueType Format (.ttf).

Google Font Directory ofere donturi care pot fi utilizate in @font-face: Google Font Directory.

Dimensiunea 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 se foloseste proprietatea font-size urmata de o valoare a dimensiunii care poate lua una din urmatoarele tipuri de valori:

Forma generala a codului CSS pentru stabilirea dimensiunii fontului:
selector { font-size:valoare; }

Pixelii (px) reprezinta, cea mai des utilizata unitate de masura pentru stabilirea dimensiunii fontului, ofera o dimensiune fixa, indiferent de sistem si imbricare.
Exemplu:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
h3 {
font-family:Calibri;
font-size:18px;
}
</style>
</head>
<body>
<h3>Tutorial CSS - font-size</h3>
</body>
</html>

Text inclinat

Atributul font-style permite scrierea textelor inclinate in doua moduri: "cursiv" si "oblic". Cursivul se refera la versiunea unui font a carui caractere au o inclinare spre dreapta, iar oblicul este un font inclinat fortat spre dreapta.
Sintaxa:

selector { font-style:valoare; }
Unde "valoare" poate fi unul din urmatoarele cuvinte: normal (revine la text normal), italic (pentru cursiv) sau oblique (oblic).
Exemplu:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
h3 {
font-family:Calibri;
font-size:18px;
font-style:italic;
}
</style>
</head>
<body>
<h3>Tutorial CSS - font-style</h3>
</body>
</html>
- Valoarea normal se poate folosi pentru a sterge formatarea cu caractere inclinate atunci cand aceasta este mostenita.

Grosimea fontului

Cu valorile proprietatii font-weight se pot defini diferite dimensiuni de ingrosare a textului, dupa cum urmeaza:

Sintaxa:
selector { font-weight:valoare; }

Exemplu:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
.cls_bold {
font-family:Calibri;
font-size:16px;
font-weight:700;
}
</style>
</head>
<body>
<p class='cls_bold'>Paragraf cu text ingrosat, font-weight:700;</p>
</body>
</html>

Text cu Majuscule

Proprietatea font-variant:small-caps afisaza textul cu MAJUSCULE.
Valoarea normal anuleaza valoarea mostenita din parinte sau din alti selectori.

Exemplu:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
h3 {
font-family:Calibri;
font-size:18px;
font-variant:small-caps;
}
</style>
</head>
<body>
<h3>Tutorial CSS - font-variant</h3>
</body>
</html>

Valori multiple pentru font

Se pot adauga toate elementele fontului intr-o singura definitie.
Pentru aceasta se foloseste proprietatea "font" urmata de valorile pentru celelalte proprietati, separate prin spatiu.
Sintaxa:

selector { font:font-style font-variant font-weight font-size font-family; }
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:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
#dv1 {
font:italic small-caps bold 17px 'Calibri';
}
</style>
</head>
<body>
<div id='dv1'>Tutorial CSS - definire stiluri pentru font</div>
</body>
</html>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag defineste zona de click intr-o harta creata dintr-o imagine?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Ce proprietate CSS indica ce sa se intample cand continutul unui element depaseste dimensiunile lui?
display overflow position
#id {
  overflow: auto;
}
Clic pe evenimentul care este declansat cand mouse-ul e deasupra unui obiect.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Sa ai Viata Buna");
}
Indicati variabila PHP ce contine datele adaugate in adresa URL, dupa caracterul "?".
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Clic pe pronumele reflexiv care e potrivit in propozitia: "Marc is the boy ... won the prize".
who which whoever
Marc is the boy who won the prize.
- Marc e baiatul care a castigat premiul.
Clic pe pronumele reflexiv care e potrivit in propozitia: "Voy a ver al pintor de ... les hablé ayer".
que quien cuyo
Voy a ver al pintor de quien les hablé ayer.
- Ma duc sa vad pictorul despre care ti-am vorbit ieri.
Configurare fonturi

Last accessed pages

  1. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (27825)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (40194)
  3. Trecutul simplu si continuu - Past Tense Simple and Continuous (28303)
  4. Data si Ora in engleza - Date and Time (6142)
  5. Adverbele in limba engleza - Adverbs (11233)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2881)
  2. Conditional IF in Limba Engleza - Fraze Conditionale (2194)
  3. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1962)
  4. Curs HTML gratuit Tutoriale HTML5 (1959)
  5. Creare si editare pagini HTML (1476)