Στυλ γραμματοσειράς CSS

Πίνακας περιεχομένων

Στυλ γραμματοσειράς

Η ιδιότητα font-style χρησιμοποιείται κυρίως για τον καθορισμό πλάγιου κειμένου.

Αυτή η ιδιότητα έχει τρεις τιμές:

κανονικό - Το κείμενο εμφανίζεται κανονικά
πλάγια γραφή - Το κείμενο εμφανίζεται με πλάγιους χαρακτήρες
πλάγιο - Το κείμενο "κλίνει" (το πλάγιο μοιάζει πολύ με το πλάγιο, αλλά λιγότερο υποστηρίζεται)

Παράδειγμα

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}
</style>
</head>
<body>

<h1>The font-style property</h1>

<p class="normal">This is a paragraph in normal style.</p>
<p class="italic">This is a paragraph in italic style.</p>
<p class="oblique">This is a paragraph in oblique style.</p>

</body>
</html>

Βάρος γραμματοσειράς

Η ιδιότητα font-weight καθορίζει το βάρος μιας γραμματοσειράς:

Παράδειγμα

p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  font-weight: normal;
}

p.light {
  font-weight: lighter;
}

p.thick {
  font-weight: bold;
}

p.thicker {
  font-weight: 900;
}
</style>
</head>
<body>

<h1>The font-weight property</h1>

<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>

</body>
</html>

Παραλλαγή γραμματοσειράς

Η ιδιότητα font-variant καθορίζει εάν ένα κείμενο πρέπει ή όχι να εμφανίζεται με γραμματοσειρά με μικρά κεφαλαία.

Σε μια γραμματοσειρά με μικρά κεφαλαία, όλα τα πεζά γράμματα μετατρέπονται σε κεφαλαία γράμματα. Ωστόσο, τα μετατρεπόμενα κεφαλαία γράμματα εμφανίζονται σε μικρότερο μέγεθος γραμματοσειράς από τα αρχικά κεφαλαία γράμματα του κειμένου.

Παράδειγμα

p.normal {
  font-variant: normal;
}

p.small {
  font-variant: small-caps;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  font-variant: normal;
}

p.small {
  font-variant: small-caps;
}
</style>
</head>
<body>

<h1>The font-variant property</h1>

<p class="normal">My name is Hege Refsnes.</p>
<p class="small">My name is Hege Refsnes.</p>

</body>
</html>