Όταν σχεδιάζετε έναν ιστότοπο, ένα από τα βασικά στοιχεία μιας σελίδας με την οποία θα εργαστείτε είναι το περιεχόμενο κειμένου. Ως εκ τούτου, όταν δημιουργείτε μια ιστοσελίδα και στυλ με CSS, ένα μεγάλο μέρος αυτής της προσπάθειας θα επικεντρωθεί γύρω από την τυπογραφία του site.
Ο τυπογραφικός σχεδιασμός διαδραματίζει σημαντικό ρόλο στο σχεδιασμό της ιστοσελίδας. Το καλά σχεδιασμένο και μορφοποιημένο περιεχόμενο κειμένου βοηθά έναν ιστότοπο να είναι πιο επιτυχημένος δημιουργώντας μια εμπειρία ανάγνωσης που είναι τόσο ευχάριστη και εύκολη στην κατανάλωση. Μέρος των προσπαθειών σας να συνεργαστείτε με τον τύπο θα είναι να επιλέξετε τις σωστές γραμματοσειρές για το σχεδιασμό σας και στη συνέχεια να χρησιμοποιήσετε το CSS για να προσθέσετε αυτές τις γραμματοσειρές και στυλ γραμματοσειρών στην οθόνη της σελίδας. Αυτό γίνεται χρησιμοποιώντας αυτό που ονομάζεται "font-stack"
Γραμματοσειρές
Όταν καθορίζετε μια γραμματοσειρά που θα χρησιμοποιηθεί σε μια ιστοσελίδα, είναι μια βέλτιστη πρακτική να συμπεριλάβετε και εναλλακτικές επιλογές σε περίπτωση που η επιλογή γραμματοσειράς σας δεν μπορεί να βρεθεί. Αυτές οι εναλλακτικές επιλογές εμφανίζονται στη "συστοιχία γραμματοσειρών". Εάν το πρόγραμμα περιήγησης δεν μπορεί να βρει την πρώτη γραμματοσειρά που αναγράφεται στη στοίβα, μετακινείται στην επόμενη. Συνεχίζει αυτή τη διαδικασία μέχρι να βρει μια γραμματοσειρά που μπορεί να χρησιμοποιήσει ή τελειώνει τις επιλογές (οπότε επιλέγει απλά κάθε γραμματοσειρά συστήματος που θέλει). Ακολουθεί ένα παράδειγμα του τρόπου εμφάνισης μιας γραμματοσειράς στο CSS όταν εφαρμόζεται στο στοιχείο "body":
σώμα { γραμματοσειρά-οικογένεια: Γεωργία, "Times New Roman", serif;}
Παρατηρήστε ότι καθορίζουμε πρώτα τη γραμματοσειρά Γεωργία. Από προεπιλογή, αυτό είναι αυτό που θα χρησιμοποιήσει η σελίδα, αλλά εάν αυτή η γραμματοσειρά δεν είναι διαθέσιμη για κάποιο λόγο, η σελίδα θα ανατρέψει στα Times New Roman. Επισυνάπτουμε αυτό το όνομα γραμματοσειράς σε διπλά εισαγωγικά επειδή είναι ένα όνομα πολλών λέξεων. Τα ονόματα γραμματοσειρών μιας λέξης, όπως η Γεωργία ή το Arial, δεν απαιτούν τα εισαγωγικά, αλλά το όνομα γραμματοσειράς πολλών λέξεων τις χρειάζονται, ώστε το πρόγραμμα περιήγησης να γνωρίζει ότι όλες αυτές οι λέξεις συνθέτουν το όνομα της γραμματοσειράς. Αν κοιτάξετε το τέλος της στοίβας γραμματοσειρών, θα πρέπει να παρατηρήσετε ότι τελειώνουμε με τη λέξη "serif". Αυτό είναι ένα γενικό όνομα γραμματοσειράς. Στην απίθανη περίπτωση που ένα άτομο δεν έχει τη Γεωργία ή Times New Roman στον υπολογιστή του, ο ιστότοπος θα χρησιμοποιεί οποιαδήποτε γραμματοσειρά serif που θα μπορούσε να βρει. Αυτό είναι προτιμότερο να επιτρέψουμε στον ιστότοπο να ανατρέχει σε οποιεσδήποτε γραμματοσειρές θέλει, επειδή μπορείτε τουλάχιστον να πείτε τι είδους γραμματοσειρά πρέπει να χρησιμοποιήσετε έτσι ώστε η συνολική εμφάνιση και ο τόνος του σχεδιασμού μιας τοποθεσίας να είναι όσο το δυνατόν πιο ανέπαφη. Ναι, ο περιηγητής θα επιλέξει μια γραμματοσειρά για εσάς, αλλά τουλάχιστον παρέχετε οδηγίες, ώστε να γνωρίζει τι είδους γραμματοσειρά θα λειτουργούσε καλύτερα στο σχεδιασμό. Το γενικό όνομα γραμματοσειράς που είναι διαθέσιμο στο CSS είναι: Ενώ υπάρχουν πολλές άλλες ταξινομήσεις γραμματοσειρών που είναι διαθέσιμες στον σχεδιασμό ιστοσελίδων και στην τυπογραφία, όπως η πλάκα-serif, blackletter, display, grunge και πολλά άλλα, αυτά τα 5 παραπάνω γενικά ονόματα γραμματοσειρών είναι αυτά που θα χρησιμοποιούσατε σε μια στοίβα γραμματοσειρών στο CSS. Ποιες είναι οι διαφορές σε αυτές τις ταξινομήσεις γραμματοσειρών; Ας ΡΙΞΟΥΜΕ μια ΜΑΤΙΑ! Ρέων οι γραμματοσειρές εμφανίζουν συχνά λεπτές, διακοσμημένες μορφές επιστολής που προορίζονται να αναπαράγουν φανταχτερό χειρόγραφο κείμενο. Αυτές οι γραμματοσειρές, λόγω των λεπτών, λουλουδιών τους, δεν είναι κατάλληλες για μεγάλο μπλοκ περιεχομένου, όπως το αντίγραφο σώματος. Οι διαγραμμένες γραμματοσειρές χρησιμοποιούνται γενικά για επικεφαλίδες και συντομότερες ανάγκες κειμένου που μπορούν να εμφανιστούν σε μεγαλύτερα μεγέθη γραμματοσειρών. Φαντασία οι γραμματοσειρές είναι οι κάπως τρελές γραμματοσειρές που δεν εμπίπτουν σε καμία άλλη κατηγορία. Γραμματοσειρές που αναπαράγουν γνωστά λογότυπα, όπως οι επιστολές από τις ταινίες του Χάρι Πότερ ή Επιστροφή στο Μέλλον, θα εμπίπτουν σε αυτήν την κατηγορία. Για άλλη μια φορά, αυτές οι γραμματοσειρές δεν είναι κατάλληλες για το περιεχόμενο του σώματος, επειδή είναι συχνά τόσο τυποποιημένες ώστε να διαβάζουν μακρύτερα περάσματα κειμένου γραμμένο σε αυτές τις γραμματοσειρές είναι πολύ δύσκολο να γίνει. Monospace οι γραμματοσειρές είναι εκείνες όπου όλες οι μορφές επιστολών έχουν το ίδιο μέγεθος και απόσταση, όπως θα είχατε βρει σε μια παλιά γραφομηχανή. Σε αντίθεση με άλλες γραμματοσειρές που έχουν μεταβλητά πλάτη για γράμματα ανάλογα με το μέγεθός τους (για παράδειγμα, ένα κεφάλαιο "W" θα διαρκούσε πολύ περισσότερο χώρο απ 'ότι ένα πεζά "i"), οι μονοφωνικές γραμματοσειρές είναι σταθερό πλάτος για όλους τους χαρακτήρες. Αυτές οι γραμματοσειρές χρησιμοποιούνται συχνά όταν ο κώδικας εμφανίζεται σε μια σελίδα επειδή φαίνεται ξεκάθαρα διαφορετικό από το άλλο κείμενο της συγκεκριμένης σελίδας. Ελαφρή γραμμή οι γραμματοσειρές είναι μία από τις πιο δημοφιλείς ταξινομήσεις. Αυτές είναι οι γραμματοσειρές που έχουν τις λίγες πρόσθετες συνδέσεις στις μορφές επιστολών. Αυτά τα επιπλέον κομμάτια ονομάζονται "serifs". Οι κοινές γραμματοσειρές serif είναι η Γεωργία και οι Times New Roman. Οι γραμματοσειρές Serif μπορούν να χρησιμοποιηθούν για μεγάλα κείμενα, όπως για τίτλο καθώς και για μεγάλα περάσματα κειμένου και αντιγράφου σώματος. Σανς σέριφ είναι η τελική ταξινόμηση που θα εξετάσουμε. Αυτές είναι οι γραμματοσειρές που δεν διαθέτουν αυτές τις συνδέσεις. Το όνομα σημαίνει "χωρίς serifs". Οι δημοφιλέστερες γραμματοσειρές σε αυτή την κατηγορία θα είναι Arial ή Helvetica. Παρόμοια με τις serifs, οι γραμματοσειρές sans-serif μπορούν να χρησιμοποιηθούν εξίσου καλά στις επικεφαλίδες καθώς και στο περιεχόμενο του σώματος. Γενικές οικογένειες γραμματοσειρών
