Γραμματοσειρά

Στην ενότητα αυτή θα δούμε πως με CSS ιδιότητες μπορούμε να ορίσουμε μέγεθος, γραμματοσειρά και άλλα χαρακτηριστικά του κειμένου στην ιστοσελίδα μας

Με την CSS ιδιότητα font-family ορίζουμε την γραμματοσειρά του κειμένου. Μια σημαντική δυνατότητα είναι να ορίζουμε παραπάνω από μια γραμματοσειρά, ώστε αν ο υπολογιστής του χρήστη δεν υποστηρίζει την πρώτη στην σειρά γραμματοσειρά, να εφαρμόζεται η επόμενη κ.ο.κ. Στο στυλ του παραπάνω παραδείγματος είδαμε το Times New Roman γράφεται μέσα σε εισαγωγικά. Στην CSS όταν το όνομα μιας γραμματοσειρά αποτελείται από παραπάνω από μια λέξη, τότε αυτό το εσωκλείουμε σε εισαγωγικά.

Με την CSS ιδιότητα font-style εμφανίζουμε το κείμενο σε πλάγια μορφή (italics). Οι τιμές που μπορεί να πάρει είναι 3:

• normal: όταν θέλουμε να μην εφαρμοστεί κανένα στυλ.
• italics: όταν θέλουμε να εμφανίσουμε το κείμενο με πλάγιους χαρακτήρες
• oblique: όταν θέλουμε να εμφανίσουμε το κείμενο με λιγότερο πλάγιους χαρακτήρες απ'ότι γίνεται με την τιμή italics. Δεν χρησιμοποιείται συχνά

Με την CSS ιδιότητα font-size ορίζουμε το μέγεθος της γραμματοσειράς. Οι τιμές που παίρνει η ιδιότητα αυτή, μπορεί να είναι απόλυτες ή σχετικές τιμές:

• Απόλυτες τιμές: όταν ορίζουμε απόλυτες τιμές, δεν μπορεί ο χρήστης να αλλάξει το μέγεθος του κειμένου της ιστοσελίδας, πράγμα αρνητικό όταν θέλουμε να είναι προσβάσιμη και απο ανθρώπους με προβλήματα όρασης, αν και οι απόλυτες τιμές χρησιμοποιούνται πιο συχνά απο τις σχετικές. Όταν χρησιμοποιούμε τιμές σε pixels (πχ. font-size: 14px;) ή σε em (πχ. font-size: 1.2em;), τότε ορίζουμε απόλυτες τιμές
• Σχετικές τιμές: με αυτον τον τρόπο ορίζουμε το μέγεθος του κειμένου σε σχέση με το μέγεθος του στοιχείου στο οποίο βρίσκεται το κείμενο. Στην περίπτωση αυτή ο χρήστης μπορεί να αλλάξει το μέγεθος του κειμένου χρησιμοποιώντας τις επιλογές του browser. Όταν χρησιμοποιούμε τιμές με ποσοστό % (πχ. font-size: 80%) ή τιμές όπως smaller (πχ. font-size: smaller) και larger (πχ. font-size: larger), τότε ορίζουμε σχετικές τιμές (δείτε τον πίνακα παρακάτω με όλες τις διαθέσιμες τιμές που μπορεί να πάρει η ιδιότητα font-size)

Στην περίπτωση που δεν ορίσουμε μέγεθος για το κείμενο της σελίδας μας, τότε η εξορισμού τιμή είναι 16px ή 1em (16px = 1em)

Οι ιδιότητες της CSS για τον ορισμό της γραμματοσειράς ενός κειμένου, μας επιτρέπουν να ορίσουμε τον τύπο της γραμματοσειράς (όπως Tahoma, Times, Courier κτλ.), το μέγεθος της, το στυλ της, κ.α.

Στον παρακάτω πίνακα παρουσιάζονται όλες οι CSS ιδιότητες διαμόρφωσης της γραμματοσειράς του κειμένου:

Ιδιότητα	Τιμές	Περιγραφή
font-family	Όνομα γραμματοσειράς	Ορίζει τον τύπο της γραμματοσειράς του κειμένου Δοκίμασε το
font-size	xx-small x-small small medium large x-large xx-large smaller larger αριθμός σε pixels αριθμός σε %	Ορίζει το μέγεθος της γραμματοσειράς του κειμένου Δοκίμασε το
font-style	normal italic oblique	Ορίζει το στυλ της γραμματοσειράς του κειμένου normal = το κείμενο εμφανίζεται χωρίς κανένα απο τα επόμενα δύο στυλ italic = το κείμενο εμφανίζεται με πλάγιους χαρακτήρες oblique = το κείμενο εμφανίζεται με πλάγιους και έντονους χαρακτήρες Δοκίμασε το
font-variant	normal small-caps	Εμφανίζει το κείμενο με κεφαλαία Δοκίμασε το
font-weight	normal bold bolder lighter 100 200 300 400 500 600 700 800 900	Ορίζει την έντονη γραφή της γραμματοσειράς του κειμένου Δοκίμασε το

Ορισμός τύπου της γραμματοσειράς
Το παράδειγμα αυτό παρουσιάζει πως ορίζουμε τον τύπο της γραμματοσειράς (ιδιότητα font-family)

Ορισμός μεγέθους της γραμματοσειράς
Το παράδειγμα αυτό παρουσιάζει πως ορίζουμε το μέγεθος της γραμματοσειράς (ιδιότητα font-size)

Ορισμός στυλ της γραμματοσειράς
Το παράδειγμα αυτό παρουσιάζει πως ορίζουμε το στυλ της γραμματοσειράς (ιδιότητα font-style)

Εμφάνιση του κειμένου της γραμματοσειράς με κεφαλαία
Το παράδειγμα αυτό παρουσιάζει πως εμφανίζουμε το κείμενο της γραμματοσειράς με κεφαλαία (ιδιότητα font-variant)

Εμφάνιση του κειμένου της γραμματοσειράς με έντονη γραφή
Το παράδειγμα αυτό παρουσιάζει πως εμφανίζουμε το κείμενο της γραμματοσειράς με έντονη γραφή (ιδιότητα font-weight)