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