Ενώ οι εικόνες παίρνουν μεγάλο μέρος της αγάπης όταν έρχονται σε ιστοσελίδες, είναι η γραπτή λέξη που απευθύνεται στις μηχανές αναζήτησης και μεταφέρει το περιεχόμενο των περισσότερων τοποθεσιών. Ως εκ τούτου, η τυπογραφική σχεδίαση είναι ένα σημαντικό μέρος του σχεδιασμού της ιστοσελίδας. Με τη σημασία του κειμένου ενός site έρχεται η ανάγκη να διασφαλιστεί ότι φαίνεται καλό και είναι εύκολο να το διαβάσετε. Αυτό γίνεται με στυλ CSS (Cascading Style Sheets).
Σύμφωνα με το σύγχρονο πρότυπο σχεδιασμού ιστοσελίδων, όταν θέλετε να υπαγορεύσετε την εμφάνιση του περιεχομένου κειμένου ενός ιστότοπου, θα το κάνετε χρησιμοποιώντας το CSS. Αυτό διαχωρίζει αυτό το στυλ CSS από τη δομή HTML μιας σελίδας. Για παράδειγμα, αν θέλατε να ορίσετε τη γραμματοσειρά μιας σελίδας σε "Arial", μπορείτε να το κάνετε προσθέτοντας τον ακόλουθο κανόνα στυλ στο CSS σας (σημείωση - αυτό πιθανόν να γίνει σε ένα εξωτερικό φύλλο στυλ CSS που εξουσιοδοτεί τα στυλ για κάθε σελίδα του ιστότοπου):
σώμα {font-family: Arial; }}Αυτή η γραμματοσειρά έχει οριστεί για το "σώμα", οπότε ο καταρράκτης CSS θα εφαρμόσει το στυλ σε όλα τα άλλα στοιχεία της σελίδας. Αυτό συμβαίνει επειδή κάθε άλλο στοιχείο HTML είναι παιδί του στοιχείου "σώμα", τα στυλ CSS όπως η οικογένεια γραμματοσειρών ή το χρώμα θα καταρρεύσουν από το γονέα στο στοιχείο του παιδιού. Αυτό θα συμβεί αν δεν προστεθεί πιο συγκεκριμένο στυλ για ορισμένα στοιχεία. Το μόνο πρόβλημα με αυτό το CSS είναι ότι έχει οριστεί μόνο μία γραμματοσειρά. Εάν η γραμματοσειρά δεν μπορεί να βρεθεί για κάποιο λόγο, το πρόγραμμα περιήγησης θα αντικαταστήσει ένα άλλο στη θέση του. Αυτό είναι κακό γιατί δεν έχετε κανέναν έλεγχο σχετικά με τη χρήση της γραμματοσειράς - το πρόγραμμα περιήγησης θα επιλέξει για εσάς και ίσως να μην σας αρέσει αυτό που αποφάσισε να χρησιμοποιήσει! Εκεί μπαίνει μια στοίβα γραμματοσειρών.
Μια στοίβα γραμματοσειρών είναι μια λίστα γραμματοσειρών στη δήλωση γραμματοσειράς γραμματοσειράς CSS. Οι γραμματοσειρές παρατίθενται κατά σειρά προτεραιότητας που θέλετε να εμφανίζονται στον ιστότοπο σε περίπτωση προβλήματος όπως μη γραμματοσειρά φόρτωσης. Μια στοίβα γραμματοσειρών επιτρέπει σε έναν σχεδιαστή να ελέγχει την εμφάνιση των γραμματοσειρών στην ιστοσελίδα, ακόμη και αν ο υπολογιστής δεν έχει την αρχική γραμματοσειρά που ζητήσατε.
Πώς λοιπόν φαίνεται η στοίβα γραμματοσειρών; Ακολουθεί ένα παράδειγμα:
σώμα {font-family: Γεωργία, "Times New Roman", serif; }}Υπάρχουν μερικά πράγματα που πρέπει να παρατηρήσετε εδώ.
Αρχικά, θα δείτε ότι διαχωρίσαμε τα διαφορετικά ονόματα γραμματοσειρών με κόμμα. μεταξύ καθεμιάς Μπορείτε να προσθέσετε όσες γραμματοσειρές επιθυμείτε, όσο διαχωρίζονται με κόμμα. Το πρόγραμμα περιήγησης θα προσπαθήσει να φορτώσει πρώτα την πρώτη γραμματοσειρά που καθορίστηκε πρώτα. Εάν αυτό αποτύχει, θα τρέξει κάτω από τη γραμμή προσπαθώντας κάθε γραμματοσειρά μέχρι να βρει ένα που μπορεί να χρησιμοποιήσει. Σε αυτό το παράδειγμα χρησιμοποιούμε γραμματοσειρές ασφαλείς στον ιστό και η "Γεωργία" πιθανότατα θα βρεθεί στον υπολογιστή του ατόμου που επισκέπτεται τον ιστότοπο (σημειώστε ότι ο φυλλομετρητής βλέπει στον υπολογιστή σας τις γραμματοσειρές που ορίζονται στη σελίδα, οπότε ο ιστότοπος λέει πραγματικά τον υπολογιστή που οι γραμματοσειρές φορτώνουν από το σύστημά σας). Εάν για κάποιο λόγο η γραμματοσειρά δεν βρέθηκε, θα μετακινηθεί προς τα κάτω στη στοίβα και θα δοκιμάσει την επόμενη καθορισμένη γραμματοσειρά.
Από την άποψη της επόμενης γραμματοσειράς, παρατηρήστε πώς είναι γραμμένο στη στοίβα. Το όνομα του "Times New Roman", περικλείεται σε διπλά εισαγωγικά. Αυτό οφείλεται στο γεγονός ότι το όνομα γραμματοσειράς έχει πολλές λέξεις. Οποιαδήποτε ονόματα γραμματοσειρών με περισσότερες από μία λέξεις (Trebuchet MS, Courier New κ.λπ.) πρέπει να έχουν το όνομα σε διπλά εισαγωγικά, έτσι ώστε το πρόγραμμα περιήγησης να γνωρίζει ότι όλες αυτές οι λέξεις είναι μέρος ενός ονόματος γραμματοσειράς.
Τέλος, τερματίζουμε τη στοίβα γραμματοσειρών με "serif", η οποία είναι μια γενική ταξινόμηση γραμματοσειρών. Στην απίθανη περίπτωση που δεν υπάρχει καμία από τις γραμματοσειρές που έχετε ορίσει στη στοίβα σας, το πρόγραμμα περιήγησης θα βρει απλώς μια γραμματοσειρά που εμπίπτει τουλάχιστον στην κατάλληλη ταξινόμηση που έχετε επιλέξει. Για παράδειγμα, εάν χρησιμοποιείτε γραμματοσειρές sans-serif όπως Arial και Verdana, από το να τερματίσετε μια στοίβα γραμματοσειρών με την ταξινόμηση του "sans-serif" θα κρατήσει τουλάχιστον τη γραμματοσειρά σε αυτή τη συνολική οικογένεια αν υπάρχει πρόβλημα φόρτωσης. Βεβαίως, θα πρέπει να είναι πολύ σπάνιο το πρόγραμμα περιήγησης να μην μπορεί να βρει κάποια από τις γραμματοσειρές που αναγράφονται στη στοίβα και να χρησιμοποιήσει αυτή τη γενική ταξινόμηση, είναι μια βέλτιστη πρακτική να συμπεριληφθεί, ούτως ή άλλως, μόνο για να είναι διπλά ασφαλής.
Γραμματοσειρές και γραμματοσειρές Web
Πολλοί ιστότοποι χρησιμοποιούν σήμερα γραμματοσειρές web που περιλαμβάνονται είτε στον ιστότοπο μαζί με άλλους πόρους (όπως οι εικόνες του ιστότοπου, το αρχείο Javascript κ.λπ.) είτε είναι συνδεδεμένοι σε μια θέση εκτός γραμματοσειράς, όπως το Google Fonts ή το Typekit. Παρόλο που αυτές οι γραμματοσειρές θα πρέπει να φορτώνονται αφού συνδέεστε με τα ίδια τα αρχεία, εξακολουθείτε να θέλετε να χρησιμοποιήσετε μια στοίβα γραμματοσειρών για να βεβαιωθείτε ότι έχετε κάποιο έλεγχο πάνω σε τυχόν προβλήματα που ενδέχεται να προκύψουν. Το ίδιο ισχύει και για τις γραμματοσειρές "web safe" που πρέπει να βρίσκονται σε κάποιον υπολογιστή (σημειώστε ότι οι γραμματοσειρές που χρησιμοποιήσαμε ως παραδείγματα σε αυτό το άρθρο, συμπεριλαμβανομένων των Arial, Verdana, Georgia και Times New Roman, είναι όλες οι γραμματοσειρές ασφαλείς στο διαδίκτυο. στον υπολογιστή ενός ατόμου). Παρόλο που η πιθανότητα να λείπει μια γραμματοσειρά είναι πολύ χαμηλή, ο ορισμός της γραμματοσειράς θα βοηθήσει όσο το δυνατόν περισσότερο τον τυπογραφικό σχεδιασμό ενός ιστότοπου .
Αρχικό άρθρο από την Jennifer Krynin. Επεξεργασμένο από τον Jeremy Girard στις 8/9/17