Κεφάλαιο 10: CSS Γραμματοσειρές

• 26 Ιουλίου 2012
• by: Georgios
• in: Web Design

Font

Η ιδιότητα font μπορεί να χρησιμοποιηθεί για να μεταβάλει το στιλ, το βάρος, τη μορφή, το μέγεθος, το ύψος της γραμμής και τη γραμματοσειρά με μία δήλωση που μοιάζει όπως η ακόλουθη:

font: italic bold normal small/1em Verdana, sans-serif;

Ο παραπάνω κώδικας θα μπορούσε να ορίσει τη γραμματοσειρά ενός στοιχείου με πλάγια μορφή, έντονο βάρος, κανονική μορφή, μικρού μεγέθους γραμματοσειρά, 1em ύψος γραμμής και γραμματοσειρά Verdana ή sans-serif.

Όλες αυτές οι ιδιότητες μπορούν να δηλωθούν και η κάθε μια ξεχωριστά όπως θα δείτε στις παρακάτω ενότητες.

Font family

Μπορείτε να επιλέξετε τη γραμματοσειρά θα χρησιμοποιήσετε σε ένα στοιχείο της σελίδας σας χρησιμοποιώντας την ιδιότητα font-family. Οι τιμές που μπορείτε να δηλώσετε σε αυτή την ιδιότητα είναι δυο

το όνομα της γραμματοσειράς
το όνομα μιας γενικής γραμματοσειράς

Αν δηλώσετε το όνομα μιας γραμματοσειράς είναι καλό να δηλώσετε και το όνομα μιας γενικής γραμματοσειράς όπως είναι τα arial, sans-serif, κα, για την περίπτωση που η γραμματοσειρά που επιλέξατε δεν υπάρχει εγκατεστημένη στον υπολογιστή του χρήστη ή δεν είναι διαθέσιμη από το server σας.

Η δήλωση της ιδιότητας γίνεται όπως στο παράδειγμα που ακολουθεί:

font-family : Verdana, sans-serif;

Font size

Μπορείτε να αλλάξετε το μέγεθος της γραμματοσειράς σε ένα στοιχείο με τη χρήση της ιδιότητας font-size όπως συμβαίνει στο παράδειγμα που ακολουθεί:

font-size : value;

και η τιμές που μπορεί αυτή η ιδιότητα να δεχτεί είναι οι ακόλουθες:

xx-large
x-large
larger
large
medium
small
smaller
x-small
xx-small
μια τιμή σε px
μια τιμή σε ποσοστό

Font style

Αν θέλετε να μεταβάλλετε τη μορφή του κειμένου σε ένα στοιχείο μπορείτε να χρησιμοποιήσετε την ιδιότητα font-style που όπως στο παράδειγμα που ακολουθεί:

font-style : value;

και οι τιμές που μπορεί να δεχτεί αυτή η ιδιότητα είναι οι ακόλουθες:

normal
italic
oblique

Font variant

Αν θέλετε να αλλάξετε την παραλλαγή του κειμένου σε ένα στοιχείο html μπορείτε να χρησιμοποιήσετε την ιδιότητα font-variant όπως στο παράδειγμα που ακολουθεί :

font-variant : value;

και οι τιμές που μπορεί να δεχτεί είναι οι ακόλουθες

normal
small-caps

Font weight

Τέλος αν θέλετε μπορείτε να αλλάξετε το βάρος της γραμματοσειράς ενός στοιχείου δηλώνοντας την ιδιότητα font-weight όπως στο παράδειγμα που ακολουθεί:

font-weight : value;

και οι τιμές που μπορεί να δεχτεί είναι οι ακόλουθες:

lighter
normal
100
200
300
400
500
600
700
800
900
bold
bolder

Προηγούμενο : Ιδιότητες κειμένου
Επόμενο :  Σύνδεσμοι και ψευδό-κλάσεις