Lecția 12: Proprietăți de Font în CSS

by

Overview:

În această lecție, vom explora proprietățile de font în CSS, care permit controlul aspectului textului pe o pagină web. Aceste proprietăți includ setarea tipului de font, dimensiunea, culoarea și alte aspecte legate de prezentarea textului.

Key Concepts:

  1. Proprietatea font-family:
    • Stabilirea tipului de font utilizat pentru text.
    • Specificarea unei liste de fonturi preferate, cu backup-uri în cazul în care un anumit font nu este disponibil.
  2. Proprietatea font-size:
    • Setarea dimensiunii textului.
    • Se poate exprima în pixeli, procente, em sau alte unități de măsură.
  3. Proprietatea font-weight:
    • Controlul grosimii textului (de la subțire la bold).
  4. Proprietatea font-style:
    • Specificarea stilului textului (normal, italic, oblique).
  5. Proprietatea line-height:
    • Stabilirea înălțimii liniei pentru text.
    • Poate fi exprimată în pixeli, em sau alte unități.
  6. Proprietatea text-align:
    • Alegerea alinierii textului (stânga, dreapta, centru, justificat).

Detailed Examples:

1. Stabilirea Tipului de Font:
/* Utilizarea unei familii generice de fonturi cu backup */
.text-font {
  font-family: 'Helvetica', 'Arial', sans-serif;
}
2. Setarea Dimensiunii Textului:
/* Stilizare cu dimensiune specificată în pixeli */
.text-dimensiune {
  font-size: 18px;
}
3. Controlul Grosimii Textului:
/* Text cu grosime mare (bold) */
.text-bold {
  font-weight: bold;
}
4. Specificarea Stilului Textului:
/* Text cu stil italic */
.text-italic {
  font-style: italic;
}
5. Stabilirea Înălțimii Liniei:
/* Text cu înălțimea liniei specificată în em */
.text-line-height {
  line-height: 1.5em;
}
6. Alinierea Textului:
/* Alinierea textului la centru */
.text-align-center {
  text-align: center;
}

Exercițiul Practic: CSS – Proprietăți de Font

Pagina HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exercițiul Practic: Proprietăți de Font</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1>Exercițiul Practic: Proprietăți de Font</h1>

  <p class="font-default">Acesta este un text cu font implicit.</p>

  <p class="font-custom">Acesta este un text cu un font personalizat.</p>

  <p class="font-size-large">Acesta este un text cu dimensiune mare.</p>

  <p class="font-weight-bold">Acesta este un text cu grosime mare (bold).</p>

  <p class="font-italic">Acesta este un text cu stil italic.</p>

  <p class="line-height">Acesta este un text cu înălțimea liniei mărită.</p>

  <p class="text-align-center">Acesta este un text aliniat la centru.</p>

</body>
</html>

Fișierul CSS (style.css):

/* Stilizare cu un font implicit */
.font-default {
  font-family: sans-serif;
}

/* Stilizare cu un font personalizat */
.font-custom {
  font-family: 'Open Sans', sans-serif;
}

/* Stilizare cu dimensiune mare a fontului */
.font-size-large {
  font-size: 24px;
}

/* Stilizare cu grosime mare (bold) */
.font-weight-bold {
  font-weight: bold;
}

/* Stilizare cu stil italic */
.font-italic {
  font-style: italic;
}

/* Stilizare cu înălțime mărită a liniei */
.line-height {
  line-height: 1.8;
}

/* Stilizare cu aliniere la centru */
.text-align-center {
  text-align: center;
}