Ο τυπογραφικός σχεδιασμός είναι ένα εξαιρετικά σημαντικό κομμάτι ενός επιτυχημένου σχεδιασμού ιστοσελίδων. Η δημιουργία ιστότοπων με κείμενο που είναι ευανάγνωστο και που φαίνεται υπέροχο είναι ο στόχος κάθε επαγγελματία σχεδιασμού ιστοσελίδων. Για να το επιτύχετε αυτό, θα πρέπει να μπορείτε να ορίσετε τις συγκεκριμένες γραμματοσειρές που θέλετε να χρησιμοποιήσετε στις ιστοσελίδες σας. Για να καθορίσετε τη γραμματοσειρά ή την οικογένεια γραμματοσειρών στα έγγραφα Web σας, θα χρησιμοποιήσετε την ιδιότητα γραμματοσειράς-οικογένειας στο δικό σας CSS.
Το πιο απλό στυλ οικογένειας γραμματοσειρών που θα μπορούσατε να χρησιμοποιήσετε θα περιλαμβάνει μόνο μία οικογένεια γραμματοσειρών:
Π {
font-family: Arial;
}
Εάν εφαρμόσατε αυτό το στυλ σε μια σελίδα, όλες οι παράγραφοι θα εμφανίζονται στην οικογένεια γραμματοσειρών "Arial". Αυτό είναι υπέροχο και δεδομένου ότι το "Arial" είναι αυτό που είναι γνωστό ως "ασφαλής γραμματοσειρά ιστού", που σημαίνει τα περισσότερα (αν όχι όλα) οι υπολογιστές θα το είχαν εγκαταστήσει, μπορείτε να είστε ξεκούραστοι γνωρίζοντας ότι η σελίδα σας θα εμφανίζεται στον προβλεπόμενο γραμματοσειρά.
Τι συμβαίνει λοιπόν αν δεν βρεθεί η γραμματοσειρά που επιλέγετε; Για παράδειγμα, εάν δεν χρησιμοποιείτε μια "γραμματοσειρά ασφαλούς ιστού" σε μια σελίδα, τι κάνει ο πράκτορας χρήστη εάν δεν διαθέτει αυτήν τη γραμματοσειρά; Κάνουν μια αντικατάσταση.
Αυτό μπορεί να οδηγήσει σε μερικές διασκεδαστικές σελίδες. Κάποτε πήγα σε μια σελίδα όπου ο υπολογιστής μου το έδειξε εξ ολοκλήρου στο "Wingdings" (ένα σύνολο εικονιδίων) επειδή ο υπολογιστής μου δεν είχε τη γραμματοσειρά που είχε καθορίσει ο προγραμματιστής και το πρόγραμμα περιήγησής μου έκανε μια άψογη επιλογή σε ποια γραμματοσειρά θα χρησιμοποιούσε ως αντικατάσταση. Η σελίδα ήταν εντελώς δυσανάγνωστη για μένα! Εδώ μπαίνει μια στοίβα γραμματοσειρών.
Διαχωρίστε πολλές οικογένειες γραμματοσειρών με κόμμα σε στοίβα γραμματοσειρών
Η "στοίβα γραμματοσειρών" είναι μια λίστα γραμματοσειρών που θέλετε να χρησιμοποιεί η σελίδα σας. Θα βάνατε τις επιλογές γραμματοσειράς σας σύμφωνα με τις προτιμήσεις σας και θα χωρίζατε κάθε μία με κόμμα. Εάν το πρόγραμμα περιήγησης δεν έχει την πρώτη οικογένεια γραμματοσειρών στη λίστα, θα δοκιμάσει τη δεύτερη και στη συνέχεια την τρίτη και ούτω καθεξής έως ότου εντοπίσει μια που έχει στο σύστημα.
γραμματοσειρά-οικογένεια: Pussycat, Algerian, Broadway;
Στο παραπάνω παράδειγμα, το πρόγραμμα περιήγησης θα αναζητήσει πρώτα τη γραμματοσειρά "Pussycat", στη συνέχεια "Αλγερικά" και στη συνέχεια "Broadway" εάν δεν βρέθηκε καμία από τις άλλες γραμματοσειρές. Αυτό σας δίνει περισσότερες πιθανότητες να χρησιμοποιηθεί τουλάχιστον μία από τις επιλεγμένες γραμματοσειρές σας. Δεν είναι τέλειο, γι 'αυτό έχουμε ακόμη περισσότερα που μπορούμε να προσθέσουμε στη στοίβα γραμματοσειρών μας (διαβάστε!).
Χρησιμοποιήστε το Generic Fonts Last
Έτσι μπορείτε να δημιουργήσετε μια στοίβα γραμματοσειρών με μια λίστα γραμματοσειρών και να μην έχετε κανένα από τα οποία μπορεί να βρει το πρόγραμμα περιήγησης. Δεν θέλετε η σελίδα σας να εμφανίζεται δυσανάγνωστη εάν το πρόγραμμα περιήγησης κάνει κακή επιλογή υποκατάστασης. Ευτυχώς το CSS έχει μια λύση για αυτό και ονομάζεται γενικές γραμματοσειρές.
Θα πρέπει πάντα να τερματίζετε τη λίστα γραμματοσειρών σας (ακόμα κι αν είναι μια λίστα με μία οικογένεια ή μόνο γραμματοσειρές που είναι ασφαλείς στον ιστό) με μια γενική γραμματοσειρά. Υπάρχουν πέντε που μπορείτε να χρησιμοποιήσετε:
- Ρέων
- Φαντασία
- Monospace
- Σανς σέριφ
- Ελαφρή γραμμή
Τα δύο παραπάνω παραδείγματα ενδέχεται να αλλάξουν σε:
font-family: Arial, sans-serif;
ή.
γραμματοσειρά-οικογένεια: Pussycat, Algerian, Broadway, fantasy;
Ορισμένα ονόματα οικογένειας γραμματοσειρών είναι δύο ή περισσότερες λέξεις
Εάν η οικογένεια γραμματοσειρών που θέλετε να χρησιμοποιήσετε είναι περισσότερες από μία λέξεις, τότε θα πρέπει να την περιβάλλετε με διπλά εισαγωγικά. Ενώ ορισμένα προγράμματα περιήγησης μπορούν να διαβάσουν οικογένειες γραμματοσειρών χωρίς εισαγωγικά, ενδέχεται να υπάρχουν προβλήματα εάν ο κενός χώρος συμπυκνωθεί ή αγνοηθεί.
font-family: "Times New Roman", serif;
Σε αυτό το παράδειγμα, μπορείτε να δείτε ότι το όνομα γραμματοσειράς "Times New Roman", το οποίο είναι πολλαπλών λέξεων, περικλείεται σε εισαγωγικά. Αυτό λέει στο πρόγραμμα περιήγησης ότι και οι τρεις αυτές λέξεις είναι μέρος αυτού του ονόματος γραμματοσειράς, σε αντίθεση με τρεις διαφορετικές γραμματοσειρές όλες με ονόματα μιας λέξης.