Η συνήθης μέθοδος για τον καθορισμό γραμματοσειρών φαίνεται κάπως έτσι:
body {
font-family: Arial, Helvetica, sans-serif;
}Εδώ ο στοιχείο body έχει ανατεθεί με τη γραμματοσειρά Arial. Αν δεν είναι διαθέσιμο στο σύστημα του θεατή, τότε απευθύνεται στο Helvetica. Αν και αυτό δεν υπάρχει, ο browser καλείται να χρησιμοποιήσει τουλάχιστον μια γραμματοσειρά χωρίς πατούρες. Φυσικά, δεν μπορείτε πραγματικά να ελέγξετε αυτό. Στο τέλος, λοιπόν, δεν έχετε πραγματικό έλεγχο επί του τελικού αποτελέσματος. Αυτό που έχετε όμως όμορφα διαμορφώσει στο GIMP ή στο Photoshop, ενδέχεται να χαθεί στον "ζούγκλα" των γραμματοσειρών. Περισσότερα για το πώς μπορείτε να λύσετε αυτό το πρόβλημα θα βρείτε στη συνέχεια.
Ας επανέλθουμε στην κλασική μέθοδο. Παρακάτω θα βρείτε μια τυπική καθορισλή, μέσω της οποίας προσαρμόζεται το βασικό στυλ της ιστοσελίδας. Με τον ορισμό του body μπορείτε να καθορίσετε αρχικά τα βασικά γραφικά χαρακτηριστικά της γραμματοσειράς.
body {
font-family: Georgia, Times, "Times New Roman", serif;
color: #000;
font-size: 1.1em;
line-height: 150%;
}
p {
font-size: 1.1em;
}
Φυσικά μπορείτε να διαμορφώσετε ξεχωριστά τα διάφορα στοιχεία της σελίδας. Αυτά μπορεί να περιλαμβάνουν επικεφαλίδες, πλάγια τμήματα, κ.λπ. Ωστόσο, σκεφτείτε και πάλι την αρχή της κληρονομικότητας του CSS.
h1 {
font-size: 1.6em;
}Το αποτέλεσμα στον browser θα μοιάζει κάπως έτσι:
Χρήση webfonts
Το πρόβλημα με τις κλασικές καθορισεις γραμματοσειρών είναι προφανές: Τελικά, δεν μπορείτε να είστε βέβαιοι ότι η γραμματοσειρά που έχετε καθορίσει είναι πραγματικά διαθέσιμη στον θεατή. Σε περίπτωση που ο browser δεν βρει τη γραμματοσειρά, επιλέγει μία παρόμοια μεταξύ εκείνης που επιθυμείτε εσείς. Συνεπώς, δεν έχετε πραγματικό έλεγχο επί του αποτελέσματος. Σε αυτό το σημείο, το @font-face προσφέρει λύση. Μέσω αυτού μπορούμε να καθορίσουμε σαφώς μια γραμματοσειρά που πρέπει να χρησιμοποιηθεί. Λειτουργεί ουσιαστικά με τον ίδιο τρόπο με τις εικόνες. Επομένως, πρέπει να καθορίσετε τη διαδρομή προς το αρχείο της γραμματοσειράς.
Στους σύγχρονους browsers χρησιμοποιούνται τα ονόματα WOFF-Webfonts για το @font-face. Αυτά τα γραμματοσειρά είναι πολύ μικρότερα από τα παλαιότερα τύπους Webfont EOT και TTF.
Μια τυπική καθοριση του @font-face φαίνεται κάπως έτσι:
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
Προσδιορίζετε το όνομα της γραμματοσειράς που θέλετε να χρησιμοποιήσετε στο font-family. Μέχρι σε αυτό το σημείο δεν υπάρχουν ιδιαιτερότητες σύνταξης. Μέσω του src:url() καθορίζετε τη διεύθυνση URL όπου βρίσκεται το αρχείο της Webfont. Αν υπάρχει η πιθανότητα η γραμματοσειρά να είναι διαθέσιμη στους χρήστες, θα πρέπει να προσθέσετε το "local" και να τονίσετε το όνομα της γραμματοσειράς μέσω του local.
@font-face {
font-family: "Bitstream Vera Serif Bold";
local: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
Μετά τον ορισμό του @font-face, οι Webfonts μπορούν να χρησιμοποιηθούν κανονικά.
h1 {
font-family: "Bitstream Vera Serif Bold";
font-size: 1.2em;
color: #3399FF;
}Εδώ μπορείτε να βρείτε τις Webfonts
Φυσικά, η ερώτηση που προκύπτει είναι από πού μπορείτε να αποκτήσετε τα αντίστοιχα αρχεία Webfont. Για παράδειγμα, η Google φιλοξενεί πολλές από αυτές τις Webfonts στη σελίδα http://www.google.com/fonts.
Αυτές τις γραμματοσειρές μπορείτε να τις ενσωματώσετε άμεσα από τη συγκεκριμένη σελίδα.
Μια αντίστοιχη κλήση θα ήταν:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
Στο font-family καθορίζετε την επιθυμητή Webfont. Στην ανωτέρω σελίδα της Google θα βρείτε αυτά τα ονόματα και τις κλήσεις. Μόλις ενσωματώσετε τη Webfont, μπορείτε να τη χρησιμοποιήσετε όπως οποιαδήποτε άλλη γραμματοσειρά.
body {
font-family: 'Tangerine', serif;
font-size: 1.2em;
}Όποιος επιθυμεί, μπορεί να χρησιμοποιήσει περισσότερες Webfonts στη σελίδα του. Γι'αυτό πατάτε στη σελίδα της Google στα επιθυμητά Webfonts στο Προσθήκη στη συλλογή. Όταν όλα τα Webfonts βρίσκονται στην δική σας συλλογή, πατάτε το Χρήση στο κάτω μέρος της σελίδας. Εκεί εμφανίζεται ένα κυλιόμενο μετρητής.
Μέσω αυτής της απεικόνισης μπορείτε να δείτε τις επιπτώσεις που έχει η ενσωμάτωση των Webfonts στον χρόνο φόρτωσης της σελίδας. Αυτές οι επιπτώσεις είναι πραγματικά μετρήσιμες και αυξάνονται με κάθε νέα Webfont που επιλέγετε.
Πώς μπορούν εύκολα να χρησιμοποιηθούν πολλά webfonts που έχετε προσθέσει στη συλλογή σας, δείχνει το παρακάτω παράδειγμα:
<link href="http://fonts.googleapis.com/css? family=Henny+Penny|Eagle+Lake|Amarante|Plaster|Courgette" rel="stylesheet" type="text/css">
Έτσι, τα μεμονωμένα webfonts καταχωρούνται πίσω από μία κάθετη γραμμή που τα χωρίζει. Η πλήρης κλήση που ταιριάζει στην επιλεγμένη συλλογή εμφανίζεται στην ήδη αναφερθείσα Χρήση-σελίδα.
Πολλά από τα webfonts προσφέρουν τις ονομαζόμενες υποσυλλογές όπως Λατινικά ή Κυριλλικά. Για να τις συμπεριλάβετε ρητά, δίνετε την επιθυμητή υποσυλλογή ως τιμή παραμέτρου.
http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic
Για να χρησιμοποιηθούν πολλαπλές από αυτές τις υποσυλλογές, καταχωρείτε κάθε μία μετά από κόμμα.
http://fonts.googleapis.com/css?family=Philosopher&subset=latin,cyrillic
Ωστόσο, η χρήση αυτού του webfont είναι αμφιλεγόμενη για έναν εντελώς διαφορετικό λόγο. Πρώτον, πρέπει να γίνει σύνδεση με έναν διακομιστή Google κατά τη φόρτωση της σελίδας. Μπορείτε να το αποφύγετε κατεβάζοντας το αρχείο webfont και ανεβάζοντάς το στον δικό σας διακομιστή. Πάντα, όμως, πρέπει να προσέχετε τους όρους χρήσης των webfonts που θέλετε να χρησιμοποιήσετε με αυτό τον τρόπο.
Ο ορισμός της γραμματοσειράς της σελίδας προβολής
Παρακάτω θα βρείτε τους ορισμούς των γραμματοσειρών που θα χρησιμοποιήσω για την τρέχουσα σελίδα προβολής:
body {
font-family: 'Crimson Text', Helvetica, sans-serif;
color: #444;
text-decoration: none;
line-height: 1.5em;
font-size: 1.2em;
}
p {
font-size: 1.1em;
}
h1 {
font-size: 1.6em;
color: #3399FF;
}
Φυσικά, μπορείτε να προσθέσετε πρόσθετα στοιχεία. Στην τρέχουσα περίπτωση, αυτή η σύνταξη είναι εντελώς επαρκής.
