Ιδιότητα font-family
Η ιδιότητα font-family ορίζει
τον τύπο της γραμματοσειράς.
Σύνταξη
επιλογέας {
font-family: όνομα γραμματοσειράς;
}
Παρατήρηση
Εάν το όνομα της γραμματοσειράς περιέχει κενά, για παράδειγμα,
Times New Roman
Παρατήρηση
Μπορείτε να απαριθμήσετε πολλές παρόμοιες γραμματοσειρές χωρισμένες με κόμμα. Όταν το πρόγραμμα περιήγησης συναντήσει την πρώτη γραμματοσειρά στη λίστα, ελέγχει εάν υπάρχει στον υπολογιστή του χρήστη. Εάν δεν υπάρχει τέτοια γραμματοσειρά, λαμβάνεται υπόψη η επόμενη γραμματοσειρά από τη λίστα και ελέγχεται επίσης για την ύπαρξή της. Επομένως, πολλές γραμματοσειρές αυξάνουν την πιθανότητα, ότι τουλάχιστον μία από αυτές θα βρεθεί στον υπολογιστή του πελάτη.
Η λίστα συνήθως τερματίζεται με μια λέξη-κλειδί,
που περιγράφει τον τύπο της γραμματοσειράς (όλες οι γραμματοσειρές
ανήκουν σε κάποιον τύπο) - serif,
sans-serif, cursive, fantasy
ή monospace.
Εάν το πρόγραμμα περιήγησης δεν βρει καμία από τις καθορισμένες
γραμματοσειρές στον υπολογιστή του χρήστη, τότε
θα επιλέξει μία από τις γραμματοσειρές του καθορισμένου τύπου.
Τύποι γραμματοσειρών
| Τύπος | Περιγραφή |
|---|---|
serif |
Γραμματοσειρά με πατούρες. |
sans-serif |
Γραμματοσειρά χωρίς πατούρες. |
cursive |
Πλάγια γραμματοσειρά. |
fantasy |
Διακοσμητική γραμματοσειρά με όμοιες μπούκλες και ασυνήθιστα εφέ. |
monospace |
Μονόπλευρη γραμματοσειρά, στο πλάτος της οποίας κάθε χαρακτήρας είναι το ίδιο. |
Προεπιλεγμένη τιμή: γραμματοσειρά που έχει οριστεί από προεπιλογή στο πρόγραμμα περιήγησης. Συνήθως είναι η Times New Roman.
Παράδειγμα
Ας ορίσουμε για τη γραμματοσειρά την οικογένεια Arial:
<p>
Lorem ipsum dolor sit amet.
</p>
p {
font-family: Arial;
}
:
Παράδειγμα
Ας ορίσουμε για τη γραμματοσειρά την οικογένεια Times New Roman. Εφόσον το όνομα της γραμματοσειράς αποτελείται από πολλές λέξεις, τότε το βάζουμε σε εισαγωγικά:
<p>
Lorem ipsum dolor sit amet.
</p>
p {
font-family: "Times New Roman";
}
:
Παράδειγμα
Ας ορίσουμε για τη γραμματοσειρά γραμματοσειρά από την ομάδα serif
(πιο πιθανό είναι να ληφθεί η Times New Roman):
<p>
Lorem ipsum dolor sit amet.
</p>
p {
font-family: serif;
}
:
Παράδειγμα
Ας ορίσουμε για τη γραμματοσειρά γραμματοσειρά από την ομάδα sans-serif
(πιο πιθανό είναι να ληφθεί η Arial):
<p>
Lorem ipsum dolor sit amet.
</p>
p {
font-family: sans-serif;
}
:
Παράδειγμα
Ας ορίσουμε για τη γραμματοσειρά γραμματοσειρά από την ομάδα fantasy
(μπορεί να μην λειτουργήσει σε εσάς λόγω απουσίας
τέτοιας γραμματοσειράς):
<p>
Lorem ipsum dolor sit amet.
</p>
p {
font-family: fantasy;
}
:
Παράδειγμα
Ας ορίσουμε για τη γραμματοσειρά γραμματοσειρά από την ομάδα monospace
(τα γράμματα θα γίνουν του ίδιου μεγέθους):
<p>
Lorem ipsum dolor sit amet.
</p>
p {
font-family: monospace;
}
:
