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

Γραμματοσειρά κειμένου

Με την CSS ιδιότητα font-family ορίζουμε την γραμματοσειρά του κειμένου.
Ορισμός γραμματοσειράς
p {
font-family: courier
}
Δοκιμάστε να αλλάξετε την γραμματοσειρά βάζοντας στην θέση της Courier, την γραμματοσειρά Tahoma ή Arial ή κάποια άλλη που γνωρίζετε
Μια σημαντική δυνατότητα είναι να ορίζουμε παραπάνω από μια γραμματοσειρά, ώστε αν ο υπολογιστής του χρήστη δεν υποστηρίζει την πρώτη στην σειρά γραμματοσειρά, να εφαρμόζεται η επόμενη κ.ο.κ.
Ορισμός γραμματοσειράς
p {
font-family: Tahoma, Arial, "Times New Roman"
}
Η γραμματοσειρά που θα εφαρμοστεί στο κείμενο των παραγράφων (Επιλογέας p) είναι η Tahoma. Αν ο υπολογιστής του χρήστη δεν την υποστηρίζει, τότε θα εφαρμοστεί η Arial. Αν ούτε η Arial δεν υποστηρίζεται απο τον υπολογιστή του χρήστη τότε θα εφαρμοστεί η γραμματοσειρά Times New Roman
Στο στυλ του παραπάνω παραδείγματος είδαμε το Times New Roman γράφεται μέσα σε εισαγωγικά. Στην CSS όταν το όνομα μιας γραμματοσειρά αποτελείται από παραπάνω από μια λέξη, τότε αυτό το εσωκλείουμε σε εισαγωγικά.

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

Με την CSS ιδιότητα font-style εμφανίζουμε το κείμενο σε πλάγια μορφή (italics). Οι τιμές που μπορεί να πάρει είναι 3:
  • normal: όταν θέλουμε να μην εφαρμοστεί κανένα στυλ.
  • italics: όταν θέλουμε να εμφανίσουμε το κείμενο με πλάγιους χαρακτήρες
  • oblique: όταν θέλουμε να εμφανίσουμε το κείμενο με λιγότερο πλάγιους χαρακτήρες απ'ότι γίνεται με την τιμή italics. Δεν χρησιμοποιείται συχνά
Στυλ στο κείμενο των επικεφαλίδων
h3 {
font-style: italic;
}

Μέγεθος γραμματοσειράς

Με την 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)

Μέγεθος γραμματοσειράς με απόλυτη τιμή
h1 {
font-size: 20px;
}

p {
font-size: 12px;
}

p.descr {
font-size: 1.5em;
}
Αλλάξτε το μέγεθος της γραμματοσειράς χρησιμοποιωντας μεγέθη σε px ή em

Μέγεθος γραμματοσειράς με σχετική τιμή
h1 {
font-size: xx-large; }

p {
font-size: 150%;
}

p.descr {
font-size: large;
}

p.descr2 {
font-size: small;
}
Αλλάξτε το μέγεθος της γραμματοσειράς χρησιμοποιωντας μεγέθη σε % ή τις τιμές όπως smaller, larger, xx-small κτλ.

Ιδιότητες της CSS για την γραμματοσειρά του κειμένου

Οι ιδιότητες της 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)
Pin It