Η σύνταξη της ιδιότητας οικογένειας γραμματοσειρών
Ο τυπογραφικός σχεδιασμός είναι ένα κρίσιμο κομμάτι ενός επιτυχημένου σχεδιασμού ιστοσελίδων. Δημιουργώντας ιστότοπους με κείμενο που είναι εύκολο να το διαβάσετε και το οποίο φαίνεται εξαιρετικό είναι οι στόχοι κάθε επαγγελματία σχεδίου ιστού. Για να επιτευχθεί αυτό, θα πρέπει να μπορείτε να ορίσετε τις συγκεκριμένες γραμματοσειρές που θέλετε να χρησιμοποιήσετε στις ιστοσελίδες σας. Για να καθορίσετε την οικογένεια χαρακτήρων γραμματοσειράς ή γραμματοσειράς στα έγγραφά σας στο Web, θα χρησιμοποιήσετε την ιδιότητα στυλ οικογένειας γραμματοσειράς στο CSS.
Το απλούστερο στυλ γραμματοσειράς-οικογένειας που θα μπορούσατε να χρησιμοποιήσετε θα περιλάμβανε μόνο μία οικογένεια γραμματοσειρών:
p {font-family: Arial; }}Αν εφαρμόσατε αυτό το στυλ σε μια σελίδα, όλες οι παραγράφους θα εμφανίζονταν στην οικογένεια γραμματοσειρών "Arial". Αυτό είναι υπέροχο και αφού το "Arial" είναι αυτό που είναι γνωστό ως "web-safe font", που σημαίνει ότι ο περισσότερος (αν όχι όλοι) υπολογιστής θα το έχει εγκαταστήσει, μπορείτε να ξεκουραστείτε πολύ εύκολα γνωρίζοντας ότι η σελίδα σας θα εμφανίζεται στην προοριζόμενη γραμματοσειρά .
Τι συμβαίνει εάν η γραμματοσειρά που επιλέγετε δεν μπορεί να βρεθεί; Για παράδειγμα, αν δεν χρησιμοποιείτε μια "γραμματοσειρά ασφαλείας για τον ιστό" σε μια σελίδα, τι κάνει ο πράκτορας χρήστη εάν δεν διαθέτει αυτή τη γραμματοσειρά; Κάνουν μια αντικατάσταση.
Αυτό μπορεί να οδηγήσει σε κάποιες πολύ αστείες σελίδες. Πήγα μια φορά σε μια σελίδα όπου ο υπολογιστής μου το έδειξε εντελώς στο "Wingdings" (ένα σετ εικονιδίων) επειδή ο υπολογιστής μου δεν είχε τη γραμματοσειρά που ο προγραμματιστής είχε καθορίσει και το πρόγραμμα περιήγησης μου έκανε μια πολύ κακή επιλογή σε ποια γραμματοσειρά θα χρήση ως αντικατάσταση. Η σελίδα ήταν εντελώς ακατανόητη για μένα! Εδώ μπαίνει στο χέρι μια στοίβα γραμματοσειρών.
Ξεχωρίστε πολλές οικογένειες γραμματοσειρών με ένα κόμμα σε μια στοίβα γραμματοσειρών
Μια "στοίβα γραμματοσειρών" είναι μια λίστα γραμματοσειρών που θέλετε να χρησιμοποιεί η σελίδα σας. Θα τοποθετούσατε τις επιλογές γραμματοσειράς με τη σειρά των προτιμήσεών σας και θα διαχωρίζετε το κάθε ένα με κόμμα. Εάν το πρόγραμμα περιήγησης δεν έχει την πρώτη οικογένεια γραμματοσειρών στη λίστα, θα δοκιμάσει το δεύτερο και μετά το τρίτο και ούτω καθεξής μέχρι να βρει ένα που έχει στο σύστημα.
γραμματοσειρά-οικογένεια: Pussycat, Algerian, Broadway;Στο παραπάνω παράδειγμα, το πρόγραμμα περιήγησης θα ψάξει πρώτα για τη γραμματοσειρά "Pussycat", στη συνέχεια "Algerian" και "Broadway" εάν δεν βρεθεί καμία από τις άλλες γραμματοσειρές. Αυτό σας δίνει περισσότερες πιθανότητες να χρησιμοποιηθεί τουλάχιστον μία από τις επιλεγμένες γραμματοσειρές σας. Δεν είναι τέλειο, γι 'αυτό έχουμε ακόμη περισσότερα που μπορούμε να προσθέσουμε στη στοίβα γραμματοσειρών μας (διαβάστε το!).
Χρησιμοποιήστε τις τελευταίες γενικές γραμματοσειρές
Έτσι, μπορείτε να δημιουργήσετε μια στοίβα γραμματοσειρών με μια λίστα γραμματοσειρών και να μην έχετε καμμία από τις οποίες το πρόγραμμα περιήγησης μπορεί να βρει. Προφανώς δεν θέλετε η σελίδα σας να εμφανίζεται δυσανάγνωστη αν το πρόγραμμα περιήγησης κάνει μια κακή επιλογή υποκατάστασης. Ευτυχώς το CSS έχει και μια λύση για αυτό: γενικές γραμματοσειρές .
Θα πρέπει πάντα να τερματίσετε τη λίστα γραμματοσειρών (ακόμα και αν πρόκειται για μια λίστα γραμματοσειρών μιας οικογένειας ή μόνο για ασφαλή web) με μια γενική γραμματοσειρά. Υπάρχουν πέντε που μπορείτε να χρησιμοποιήσετε:
- ρέων
- φαντασία
- monospace
- Σανς σέριφ
- ελαφρή γραμμή
Τα δύο παραπάνω παραδείγματα μπορούν να αλλάξουν σε:
γραμματοσειρά-οικογένεια: Arial, sans-serif; γραμματοσειρά-οικογένεια: Pussycat, Αλγερία, Μπρόντγουεϊ, φαντασία.Ορισμένα ονόματα γραμματοσειρών είναι δύο ή περισσότερα λέξεις
Εάν η οικογένεια γραμματοσειρών που θέλετε να χρησιμοποιήσετε είναι περισσότερες από μία λέξεις, τότε θα πρέπει να το περιβάλλετε με διπλά εισαγωγικά. Ενώ ορισμένα προγράμματα περιήγησης μπορούν να διαβάσουν οικογένειες γραμματοσειρών χωρίς εισαγωγικά, ενδέχεται να προκύψουν προβλήματα εάν ο κενός χώρος συμπυκνωθεί ή αγνοηθεί.
γραμματοσειρά-οικογένεια: "Times New Roman", serif;Σε αυτό το παράδειγμα, μπορείτε να δείτε ότι το όνομα γραμματοσειράς "Times New Roman", το οποίο είναι πολλαπλών λέξεων, περικλείεται σε εισαγωγικά. Αυτό λέει στο πρόγραμμα περιήγησης ότι και οι τρεις αυτές λέξεις είναι μέρος αυτού του ονόματος γραμματοσειράς, σε αντίθεση με τρεις διαφορετικές γραμματοσειρές, όλες με ονόματα μιας λέξης.
Αρχικό άρθρο από την Jennifer Krynin. Επεξεργάστηκε στις 12/2/16 από τον Jeremy Girard