Τυπικές γραμματοσειρές για σχεδιασμό ιστοσελίδων. Ασφαλείς γραμματοσειρές

Συσκευές 04.05.2019
Συσκευές

Όταν ξεκινάτε να δημιουργείτε μια διάταξη, πρέπει να καθορίσετε συγκεκριμένα στο CSS τις γραμματοσειρές που χρησιμοποιούνται στη σελίδα. Συχνά, με διαφορετικές γραμματοσειρές, ο σχεδιαστής πληκτρολογεί όχι μόνο το κύριο κείμενο της σελίδας, αλλά και διάφορες επικεφαλίδες, λογότυπα και μονογράμματα:

Καλός σχεδιαστής, όπως ένας καλός σχεδιαστής διάταξης, γνωρίζει ότι το πρόγραμμα περιήγησης μπορεί να χρησιμοποιήσει μόνο εκείνες τις γραμματοσειρές που είναι εγκατεστημένες στον υπολογιστή του χρήστη για την εμφάνιση της σελίδας. Δηλαδή, οι γραμματοσειρές μπορούν να χωριστούν σε δύο κατηγορίες:

  1. Γραμματοσειρές που θα εμφανίζονται χωρίς προβλήματα από τη συντριπτική πλειοψηφία των χρηστών.
  2. Γραμματοσειρές που έχετε αρκετές ΜΕΓΑΛΗ ομαδαδεν υπάρχουν χρήστες.

Εάν ο σχεδιαστής χρησιμοποίησε γραμματοσειρές της δεύτερης κατηγορίας για να δημιουργήσει, για παράδειγμα, ένα λογότυπο ή μεγάλες στατικές επικεφαλίδες, δεν μπορείτε να διστάσετε να χρησιμοποιήσετε την τεχνική. Το μειονέκτημα της χρήσης αυτής της τεχνικής είναι η ανελαστικότητα. Εάν υπάρχουν αλλαγές στο κείμενο, θα πρέπει να επαναλάβετε την εικόνα και να αλλάξετε το CSS (για παράδειγμα, εάν οι διαστάσεις της νέας εικόνας δεν ταιριάζουν με την παλιά).

Μπορούμε να πούμε ότι ο κίνδυνος χρήσης μιας τεχνικής εξαρτάται άμεσα από την πιθανότητα αλλαγής του κειμένου. Επομένως, κάντε, για παράδειγμα, γενικό κείμενοΔεν επιτρέπονται σελίδες με μη τυπικές γραμματοσειρές! Ένας ικανός σχεδιαστής δεν θα το έκανε ποτέ αυτό. Και αν ο σχεδιαστής συναντήσει ένα πράσινο, ένας καλός σχεδιαστής διάταξης είναι απλά υποχρεωμένος να διορθώσει το λάθος του - να το αντικαταστήσει στη διάταξη αυτή η γραμματοσειράόσο το δυνατόν πιο παρόμοια με την τυπική.

Πώς όμως μπορεί κανείς να διακρίνει τις γραμματοσειρές της πρώτης ομάδας από τη δεύτερη; Είναι σαφές ότι δεν μπορείτε να βασιστείτε σε ένα σύνολο γραμματοσειρών εγκατεστημένων απευθείας στον υπολογιστή σας! Ας το καταλάβουμε.

Τυπικές γραμματοσειρές

Οι τυπικές γραμματοσειρές είναι ένα σύνολο γραμματοσειρών που εγκαθίστανται με το λειτουργικό σύστημα. Δεδομένου ότι τα λειτουργικά συστήματα είναι διαφορετικά, το σύνολο των γραμματοσειρών τους είναι διαφορετικό. Πάπυρος τυπικές γραμματοσειρές διαφορετικές εκδόσειςΜπορείτε να βρείτε τα Windows, για παράδειγμα, στο άρθρο Τυπικές γραμματοσειρές Windows και μια λίστα με τυπικές γραμματοσειρές Mac OS στη σελίδα Γραμματοσειρές που περιλαμβάνονται στο Mac OS. Όσο για τα λειτουργικά συστήματα Unix/Linux, δεν έχουν ούτε ένα σύνολο γραμματοσειρών. Πολλά Χρήστες Linuxχρησιμοποιήστε το σύνολο γραμματοσειρών DejaVu, ιδίως στο Ubuntu που είναι εγκατεστημένα από προεπιλογή. Σύμφωνα με στατιστικά στοιχεία από το http://www.codestyle.org, πολλοί χρήστες Unix/Linux έχουν επίσης εγκατεστημένα σύνολα γραμματοσειρών URW, Free και άλλα. Σύμφωνα με τα ίδια στατιστικά στοιχεία, πάνω από το 60% των χρηστών Unix/Linux έχουν γραμματοσειρές από τις βασικές γραμματοσειρές για το Web σετ στον υπολογιστή τους, το οποίο μέχρι το 2002 ήταν επίσημα διαθέσιμο για ΔΩΡΕΑΝ Λήψηστον ιστότοπο της Microsoft.

Προκειμένου η σελίδα να εμφανίζεται όπως ήθελε ο σχεδιαστής, σε οποιαδήποτε λειτουργικό σύστημα, υπάρχει δυνατότητα σε Ιδιότητα CSSκαθορίστε πολλές γραμματοσειρές, διαχωρισμένες με κόμμα.

Αυτή η ιδιότητα καθορίζει μια λίστα με προτεραιότητα με ονόματα οικογένειας γραμματοσειρών ή/και γενικά οικογενειακά ονόματα. Σύμφωνα με την προδιαγραφή CSS2, υπάρχουν δύο τύποι οικογενειακών ονομάτων γραμματοσειρών:

  1. Το όνομα της οικογένειας γραμματοσειράς της επιλογής σας. Για παράδειγμα, "Times new Roman", "Arial" και άλλα. Τα οικογενειακά ονόματα γραμματοσειρών που περιέχουν κενά πρέπει να περικλείονται σε εισαγωγικά. Εάν λείπουν εισαγωγικά, τυχόν χαρακτήρες διαστήματος πριν και μετά το όνομα της γραμματοσειράς αγνοούνται και οποιαδήποτε ακολουθία κενών εντός του ονόματος της γραμματοσειράς μετατρέπεται σε ένα ενιαίο διάστημα.
  2. Γενική (κοινή) οικογένεια. Η προδιαγραφή ορίζει τις ακόλουθες γενικές οικογένειες:
    • serif - γραμματοσειρές με σερίφ στα άκρα.
    • sans-serif - γραμματοσειρές sans-serif.
    • γράμματα — πλάγιες γραμματοσειρές.
    • φαντασία - διακοσμητικές γραμματοσειρές?
    • monospace - γραμματοσειρά monospace (με γράμματα ίδιου πλάτους).
    Τα ονόματα των προγονικών οικογενειών είναι λέξεις-κλειδιάκαι δεν χρειάζεται να περικλείεται σε εισαγωγικά.

Έτσι, για τη σχεδίαση, λαμβάνεται μια τυπική γραμματοσειρά από το λειτουργικό σύστημα Windows, επιλέγεται μια παρόμοια για Mac OS και Unix/Linux, καθορίζεται μια κοινή οικογένεια γραμματοσειρών και τελειώσατε.

Αλλά δεν είναι τόσο απλό. Ας σκάψουμε με περισσότερες λεπτομέρειες.

Αναζήτηση γραμματοσειρών που είναι ασφαλείς για τον Ιστό

Στο Διαδίκτυο, η έννοια των «ασφαλών» γραμματοσειρών Ιστού έχει αναπτυχθεί ιστορικά. Μια ασφαλής γραμματοσειρά είναι μια γραμματοσειρά που είναι τυπική για όλα τα λειτουργικά συστήματα. Αφού μπορεί κανείς μόνο να ονειρευτεί μια τέτοια κατάσταση πραγμάτων, τότε Δεν υπάρχουν απολύτως ασφαλείς γραμματοσειρές!

Ορισμένες γραμματοσειρές μπορούν να ονομαστούν ασφαλείς με ορισμένες επιφυλάξεις.

Η βάση για τον προσδιορισμό των «ασφαλών» γραμματοσειρών ήταν οι γραμματοσειρές του πιο συνηθισμένου λειτουργικού συστήματος. συστήματα Windows, τα οποία χρησιμοποιούνται και σε άλλα λειτουργικά συστήματα. Ένα παράδειγμα τέτοιας χρήσης είναι οι ήδη αναφερθείσες γραμματοσειρές Core για το πακέτο γραμματοσειρών Web, το οποίο, σύμφωνα με στατιστικά στοιχεία, έχει κατεβάσει πολλοί χρήστες Unix/Linux.

Αυτό το πακέτο περιλαμβάνει τις ακόλουθες γραμματοσειρές: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. Όλοι τους υποστηρίζουν το κυριλλικό αλφάβητο, το οποίο είναι σημαντικό για το Runet.

Το σύνολο γραμματοσειρών που συνοδεύει το Mac OS X (αυτό το λειτουργικό σύστημα είναι το πιο ευρέως χρησιμοποιούμενο μεταξύ των χρηστών Mac OS) περιλαμβάνει όλες τις γραμματοσειρές από τις βασικές γραμματοσειρές για το σύνολο Web.

Έτσι, με βάση τις γραμματοσειρές των Windows που χρησιμοποιούνται σε άλλα λειτουργικά συστήματα, σχηματίστηκε η ακόλουθη λίστα με τις λεγόμενες «ασφαλείς» γραμματοσειρές Ιστού:

  • Arial
  • Arial Black
  • Comic Sans MS
  • Courier New
  • Γεωργία
  • Επίπτωση
  • Times New Roman
  • Trebuchet MS
  • Verdana

Η γραμματοσειρά Webdings περιέχει εικονίδια και δεν μπορεί να χρησιμοποιηθεί για περιεχόμενο. Η Andale Mono δεν λαμβάνει ευρεία εφαρμογή, γιατί δεν είναι κατάλληλο για καθημερινή ανάγνωση κειμένου από την οθόνη και δεν το έχουν όλοι χρήστες Windows.

Κάθε χρήστης Windows, Mac OS X και η συντριπτική πλειοψηφία των χρηστών Unix/Linux (δηλαδή αυτοί που έχουν εγκαταστήσει τις γραμματοσειρές Core για το πακέτο Web) έχουν όλες αυτές τις γραμματοσειρές.

Τι γίνεται όμως με τα υπόλοιπα; Μετά από όλα, θέλετε το σχέδιο του σχεδιαστή να φαίνεται όσο το δυνατόν περισσότερο μεγαλύτερο αριθμόχρήστες!

Διαβάστε σχετικά στο δεύτερο μέρος της δημοσίευσης.

Ένα από τα κύρια καθήκοντα του σχεδιασμού ιστοσελίδων είναι η επιλογή του σωστού τυπικές γραμματοσειρές. Υπηρεσίες ενσωμάτωσης γραμματοσειρών όπως Google WebΟι γραμματοσειρές, ή Typekit, δημιουργήθηκαν ως εναλλακτική λύση με στόχο να προσφέρουν κάτι νέο.

Είναι πολύ εύχρηστα. Ας πάρουμε ως παράδειγμα υπηρεσία GoogleΓραμματοσειρές Ιστού.

Επιλέξτε τη γραμματοσειρά Open Sans, Droid Serif ή Lato. Γράψτε τον κώδικα και επικολλήστε τον στο στοιχείο έγγραφο HTML. Είστε έτοιμοι να το αναφέρετε σε CSS! Η όλη διαδικασία δεν κράτησε περισσότερο από 60 δευτερόλεπτα. Και όλα είναι εντελώς δωρεάν.

Τι μπορεί να φταίει;

Κάποια γραμματοσειρά μπορεί να μην είναι διαθέσιμη σε όλους. Και αυτό σημαίνει ότι μπορεί να υπάρχουν προβλήματα. Είσαι ευχαριστημένος με αυτό που επέλεξες; όμορφη γραμματοσειράγια τον ιστότοπο και ο επισκέπτης της ιστοσελίδας βλέπει άσχημο γράψιμο.

Αυτό δεν θα συμβεί εάν εφαρμόσετε μια επιλογή δημιουργίας αντιγράφων ασφαλείας.

Πόσο σημαντικό είναι να χρησιμοποιείτε ασφαλείς γραμματοσειρές ιστού;

Κάθε συσκευή έχει δικό του σετπροεγκατεστημένες γραμματοσειρές. Ποιο εξαρτάται από το λειτουργικό σύστημα. Το πρόβλημα είναι ότι υπάρχουν μικρές διαφορές μεταξύ τους.

Τι γίνεται με τους ιστότοπους; Σαν αυτό; Η γραμματοσειρά που βλέπετε μπορεί να μην είναι αυτή που είχε αρχικά καθοριστεί για τον ιστότοπο.

Τι σημαίνει; Ας πούμε ότι ο σχεδιαστής έχει επιλέξει κάποια οικογένεια γραμματοσειρών επί πληρωμή για τον ιστότοπο. Εάν δεν τις έχετε εγκαταστήσει και δεν παρέχονται από ειδική υπηρεσία web, τότε η γραμματοσειρά που βλέπετε είναι μία από τις τυπικές επιλογές. Για παράδειγμα, οι Times New Roman.

Επομένως, το κείμενο στην οθόνη σας μπορεί να φαίνεται απλά τρομερό.

Και εδώ τυπικές γραμματοσειρές για τον ιστότοποδιαθέσιμο σε όλα τα λειτουργικά συστήματα. Αυτή είναι μια μικρή συλλογή διαθέσιμη σε Windows, Mac, Google, καθώς και σε Unix και Linux.

Με τη βοήθεια αυτής της επιλογής, οι σχεδιαστές, καθώς και οι ιδιοκτήτες ιστοτόπων, μπορούν να καθορίσουν ποια γραμματοσειρά θα χρησιμοποιηθεί ως εφεδρική γραμματοσειρά. Αυτό σας δίνει τη δυνατότητα να ελέγχετε πώς θα φαίνεται η σελίδα σε διαφορετικές συσκευές.

Ως εναλλακτική επιλογή, ο προγραμματιστής επιλέγει μια γραμματοσειρά που μοιάζει πολύ με την αρχική και είναι αυτή που θα εμφανίζεται στον χρήστη.

Ας ρίξουμε μια ματιά σε μια επιλογή από τα πιο δημοφιλή τυπικές γραμματοσειρές HTML.

15 καλύτερες γραμματοσειρές με ασφάλεια στο Web

  1. Arial

Θεωρείται τυπικό στις περισσότερες περιπτώσεις. Η πιο κοινή γραμματοσειρά " Σανς σέριφ"ή γραμματοσειρές sans serif ( που δεν έχουν σερίφ στα άκρα των γραμμάτων). Χρησιμοποιείται συχνά στα Windows για την αντικατάσταση άλλων χαρακτήρων.

  1. Helvetica


Η Helvetica είναι σωτήρια για τους σχεδιαστές. Αυτό τυπική γραμματοσειρά Ιστούλειτουργεί σχεδόν πάντα ( Με τουλάχιστον, ως δίχτυ ασφαλείας για άλλες γραμματοσειρές).

  1. Times New Roman


Εξυπηρετεί τον ίδιο ρόλο για τις γραμματοσειρές serif όπως το Arial για τις γραμματοσειρές sans serif. Είναι ένα από τα πιο δημοφιλή στο συσκευές Windows. Αυτό αναβαθμισμένη έκδοσηπαλιά γραμματοσειρά Times.

  1. Φορές


CSS τυπική γραμματοσειράΟι Times είναι γνωστοί στους περισσότερους. Πολλοί τον θυμούνται με μικρά γράμματα σε στενές στήλες παλιών εφημερίδων. Το πιο κοινό είδος εκτύπωσης που έχει γίνει παράδοση.

  1. Courier New


Παρόμοιο με το Times New Roman και χρησιμοποιείται ως παραλλαγή των παλιών κλασικών. Θεωρείται επίσης γραμματοσειρά μονοδιάστημα. Σε αντίθεση με τις γραμματοσειρές serif και sans serif, όλοι οι χαρακτήρες του έχουν το ίδιο πλάτος.

  1. Μεταφορέας


Παλιά γραμματοσειρά σταθερό πλάτος, το οποίο χρησιμοποιείται ως εφεδρικό αντίγραφο σε όλες σχεδόν τις συσκευές και τα λειτουργικά συστήματα.

  1. Verdana


Το Verdana μπορεί δικαίως να θεωρηθεί μια αληθινή γραμματοσειρά Ιστού ( αληθινή γραμματοσειρά Ιστού) χάρη στις απλές γραμμές που λειτουργούν ως σερίφ, καθώς και μεγάλο μέγεθος. Τα γράμματά του είναι ελαφρώς επιμήκη, ώστε να διαβάζονται εύκολα στην οθόνη.

  1. Γεωργία


Η τυπική γραμματοσειρά web Georgia είναι παρόμοια σε σχήμα και μέγεθος με τη γραμματοσειρά Verdana. Οι χαρακτήρες του είναι μεγαλύτεροι από άλλες γραμματοσειρές ίδιου μεγέθους. Αλλά είναι καλύτερα να μην το χρησιμοποιείτε σε συνδυασμό με άλλα. Το ίδιο Times New Roman μοιάζει με νάνο σε σύγκριση.

  1. Παλατίνο


Το Palatino χρονολογείται από την εποχή της Αναγέννησης. Χωρίς αστεία. Αυτό είναι άλλο ένα μεγάλη γραμματοσειρά, το οποίο είναι ιδανικό για το Διαδίκτυο. Χρησιμοποιείται συνήθως σε τίτλους και διαφημίσεις.

  1. Garamond


Μια άλλη αρχαία γραμματοσειρά που εμφανίστηκε τον 16ο αιώνα στο Παρίσι. Η νέα και βελτιωμένη έκδοσή του διατίθεται στάνταρ στις περισσότερες συσκευές Windows. Αργότερα, αυτή η γραμματοσειρά υιοθετήθηκε από άλλα λειτουργικά συστήματα.

  1. Βιβλιοπωλείο


Bookman ( ή Bookman Old Style) - ένας από καλύτερες τυπικές γραμματοσειρέςγια επικεφαλίδες. Χαρακτηριστικό του χαρακτηριστικό είναι η αναγνωσιμότητα ακόμα και όταν χρησιμοποιείται μικρό μέγεθος.

  1. Comic Sans MS


Το Comic Sans MS είναι μια διασκεδαστική εναλλακτική για γραμματοσειρές serif.

  1. Trebuchet MS


Αυτή είναι μια γραμματοσειρά με μεσαιωνικό θέμα που αναπτύχθηκε αρχικά από τη Microsoft στα μέσα της δεκαετίας του '90. Χρησιμοποιήθηκε στα Windows XP. Σήμερα, χρησιμοποιείται για τη σύνθεση του κύριου κειμένου.

  1. Arial Black


Αναλογικό τυπική γραμματοσειρά για τον ιστότοπο Arial. Είναι αλήθεια ότι είναι μεγαλύτερο, παχύτερο και πιο σκληρό. Οι αναλογίες του είναι παρόμοιες με τη γραμματοσειρά Helvetica. Και είναι σημαντικό. Αυτοί μπορούν αντικαταστήστε με επιτυχία την Helvetica χωρίς να χρειαστεί να αγοράσετε άδεια.

  1. Επίπτωση


Μια άλλη εξαιρετική γραμματοσειρά για την επισήμανση επικεφαλίδων. Λειτουργεί καλά σε μια σύντομη φράση που αποτελείται από πολλές λέξεις, καθώς και σε μεγάλες προτάσεις.

ΣΕ αυτή τη λίσταπαραθέτει γραμματοσειρές κοινές σε όλες τις τρέχουσες αυτή τη στιγμήΛειτουργικά συστήματα Windows (στην πραγματικότητα, από τα Windows 98) και τα ισοδύναμα τους στο Mac OS. Τέτοιες γραμματοσειρές ονομάζονται μερικές φορές "ασφαλείς γραμματοσειρές προγράμματος περιήγησης" ( ασφαλές πρόγραμμα περιήγησηςγραμματοσειρές). Αυτό είναι ένα μικρό βιβλίο αναφοράς που χρησιμοποιώ όταν φτιάχνω ιστοσελίδες και νομίζω ότι θα είναι χρήσιμο και σε εσάς.

Εάν είστε νέος στο σχεδιασμό ιστοσελίδων, μπορεί να σκέφτεστε κάτι σαν: «Γιατί να περιοριστώ σε αυτό; μικρό σετγραμματοσειρές; Έχω μια τεράστια συλλογή από όμορφες γραμματοσειρές!». Το γεγονός είναι ότι το πρόγραμμα περιήγησης του επισκέπτη μπορεί να εμφανίσει μόνο εκείνες τις γραμματοσειρές που είναι εγκατεστημένες στο δικό τουλειτουργικό σύστημα ( περίπου. μεταφράστης:Επί του παρόντος, είναι ήδη δυνατή η χρήση σχεδόν οποιασδήποτε γραμματοσειράς κατά το σχεδιασμό σελίδων και της νέας τους ιδιότητας @font-face; Ωστόσο, δεν υποστηρίζουν ακόμη όλα τα προγράμματα περιήγησης αυτή τη λειτουργία), πράγμα που σημαίνει ότι κάθεο επισκέπτης της σελίδας σας πρέπει να είναι ο κάτοχος των γραμματοσειρών που έχετε επιλέξει. Επομένως, θα πρέπει να χρησιμοποιείτε μόνο γραμματοσειρές που είναι διαθέσιμες σε κάθε λειτουργικό σύστημα. Ευτυχώς, το CSS έχει μια ιδιότητα @font-family, γεγονός που διευκολύνει αυτήν την εργασία.

Λίστα

@font-family νόημα Windows Μακ Οικογένεια
Arial, Helvetica, sans-serif Arial Arial, Helvetica Σανς σέριφ
"Arial Black", Gadget, sans-serif Arial Black Arial Black, Gadget Σανς σέριφ
«Comic Sans MS», γράμμα Comic Sans MS Comic Sans MS 5 ρέων
«Courier New», Courier, monospace Courier New Courier New, Courier 6 μονοδιάστημα
Γεωργία, Σερίφ Γεωργία 1 Γεωργία ελαφρή γραμμή
Impact, Charcoal, sans-serif Επίπτωση Κρούση 5, Άνθρακας 6 Σανς σέριφ
"Lucida Console", Μονακό, monospace Κονσόλα Lucida Μονακό 5 μονοδιάστημα
"Lucida Sans Unicode", "Lucida Grande", sans-serif Lucida Sans Unicode Λουσίντα Γκράντε Σανς σέριφ
«Palatino Linotype», «Book Antiqua», Palatino, σερίφ Palatino Linotype, Βιβλίο Antiqua 3 Palatino 6 ελαφρή γραμμή
Tahoma, Γενεύη, sans-serif Ταχόμα Γενεύη Σανς σέριφ
«Times New Roman», Times, σερίφ Times New Roman Φορές ελαφρή γραμμή
«Trebuchet MS», Helvetica, sans-serif Trebuchet MS 1 Helvetica Σανς σέριφ
Verdana, Γενεύη, sans-serif Verdana Verdana, Γενεύη Σανς σέριφ
Σύμβολο Σύμβολο 2 Σύμβολο 2 -
Webdings Ιστοσελίδες 2 Ιστοσελίδες 2 -
Wingdings, "Zapf Dingbats" Φτερά 2 Zapf Dingbats 2 -
«MS Sans Serif», Γενεύη, sans-serif MS Sans Serif 4 Γενεύη Σανς σέριφ
«MS Serif», «New York», σερίφ MS Serif 4 Νέα Υόρκη 6 ελαφρή γραμμή

1 Οι γραμματοσειρές Georgia και Trebuchet MS συνοδεύονται από Windows 2000/XP και περιλαμβάνονται στο πακέτο γραμματοσειρών IE (και μάλιστα συνοδεύονται από πολλές εφαρμογές της Microsoft), επομένως εγκαθίστανται σε πολλούς υπολογιστές με Windows 98.

2 Οι γραμματοσειρές χαρακτήρων εμφανίζονται μόνο σε Internet Explorer, σε άλλα προγράμματα περιήγησης συνήθως αντικαθίστανται με μια τυπική γραμματοσειρά (αν και, για παράδειγμα, η γραμματοσειρά Symbol εμφανίζεται στο Opera και το Webdings στο Safari).

3 Η γραμματοσειρά Book Antiqua είναι σχεδόν πανομοιότυπη με την Palatino Linotype. Το Palatino Linotype συνοδεύεται από Windows 2000/XP και το Book Antiqua με Windows 98.

4 Λάβετε υπόψη ότι αυτές οι γραμματοσειρές δεν είναι TrueType, αλλά bitmap, επομένως μπορεί να φαίνονται κακές σε ορισμένα μεγέθη (είναι σχεδιασμένες να εμφανίζονται σε 8, 10, 12, 14, 18 και 24 pt στα 96 DPI).

5 Αυτές οι γραμματοσειρές λειτουργούν μόνο στο Safari σε τυπικό στυλ, αλλά δεν λειτουργούν με έντονους ή πλάγιους χαρακτήρες. Το Comic Sans MS λειτουργεί επίσης με έντονη γραφή, αλλά όχι με πλάγιους χαρακτήρες. Άλλα προγράμματα περιήγησης Mac φαίνεται να μιμούνται τις ιδιότητες γραμματοσειράς που λείπουν από μόνα τους (ευχαριστώ τον Christian Fecteau για την συμβουλή).

6 Αυτές οι γραμματοσειρές εγκαθίστανται σε Mac μόνο με κλασική εγκατάσταση

Στιγμιότυπα οθόνης

  • Mac OS X 10.4.8, Firefox 2.0, ClearType ενεργοποιημένο (ευχαριστούμε τον Juris Vecvanags για το στιγμιότυπο οθόνης)
  • Mac OS X 10.4.4, Firefox 1.5, ClearType ενεργοποιημένο
  • Mac OS X 10.4.11, Safari 3.0.4, ClearType ενεργοποιημένο (ευχαριστώ τον Nolan Gladius για το στιγμιότυπο οθόνης)
  • Mac OS X 10.4.4, Safari 2.0.3, ClearType ενεργοποιημένο (ευχαριστώ τον Eric Zavesky για το στιγμιότυπο οθόνης)
  • Windows Vista, Internet Explorer 7, ClearType ενεργοποιημένο
  • Windows Vista, Firefox 2.0, ClearType ενεργοποιημένο (ευχαριστώ τον Michiel Bijl για το στιγμιότυπο οθόνης)
Αυτή η λίστα περιέχει γραμματοσειρές κοινές σε όλα τα τρέχοντα λειτουργικά συστήματα Windows (στην πραγματικότητα, από τα Windows 98) και τις αντίστοιχές τους στο Mac OS. Τέτοιες γραμματοσειρές ονομάζονται μερικές φορές "ασφαλείς γραμματοσειρές προγράμματος περιήγησης" ( ασφαλείς γραμματοσειρές του προγράμματος περιήγησης). Αυτό είναι ένα μικρό βιβλίο αναφοράς που χρησιμοποιώ όταν φτιάχνω ιστοσελίδες και νομίζω ότι θα είναι χρήσιμο και σε εσάς.

Εάν είστε νέος στο σχεδιασμό ιστοσελίδων, μπορεί να σκέφτεστε κάτι σαν: «Γιατί να περιοριστώ σε ένα τόσο μικρό σύνολο γραμματοσειρών; Έχω μια τεράστια συλλογή από όμορφες γραμματοσειρές!». Το γεγονός είναι ότι το πρόγραμμα περιήγησης του επισκέπτη μπορεί να εμφανίσει μόνο εκείνες τις γραμματοσειρές που είναι εγκατεστημένες στο δικό τουλειτουργικό σύστημα ( περίπου. μεταφράστης:Επί του παρόντος, είναι ήδη δυνατή η χρήση σχεδόν οποιασδήποτε γραμματοσειράς κατά το σχεδιασμό σελίδων χρησιμοποιώντας το CSS 3 και τη νέα του ιδιότητα @font-face; Ωστόσο, δεν υποστηρίζουν ακόμη όλα τα προγράμματα περιήγησης αυτή τη λειτουργία), πράγμα που σημαίνει ότι κάθεο επισκέπτης της σελίδας σας πρέπει να είναι ο κάτοχος των γραμματοσειρών που έχετε επιλέξει. Επομένως, θα πρέπει να χρησιμοποιείτε μόνο γραμματοσειρές που είναι διαθέσιμες σε κάθε λειτουργικό σύστημα. Ευτυχώς, το CSS έχει μια ιδιότητα @font-family, γεγονός που διευκολύνει αυτήν την εργασία.

Λίστα

@font-family νόημα Windows Μακ Οικογένεια
Arial, Helvetica, sans-serif Arial Arial, Helvetica Σανς σέριφ
"Arial Black", Gadget, sans-serif Arial Black Arial Black, Gadget Σανς σέριφ
«Comic Sans MS», γράμμα Comic Sans MS Comic Sans MS 5 ρέων
«Courier New», Courier, monospace Courier New Courier New, Courier 6 μονοδιάστημα
Γεωργία, Σερίφ Γεωργία 1 Γεωργία ελαφρή γραμμή
Impact, Charcoal, sans-serif Επίπτωση Κρούση 5, Άνθρακας 6 Σανς σέριφ
"Lucida Console", Μονακό, monospace Κονσόλα Lucida Μονακό 5 μονοδιάστημα
"Lucida Sans Unicode", "Lucida Grande", sans-serif Lucida Sans Unicode Λουσίντα Γκράντε Σανς σέριφ
«Palatino Linotype», «Book Antiqua», Palatino, σερίφ Palatino Linotype, Βιβλίο Antiqua 3 Palatino 6 ελαφρή γραμμή
Tahoma, Γενεύη, sans-serif Ταχόμα Γενεύη Σανς σέριφ
«Times New Roman», Times, σερίφ Times New Roman Φορές ελαφρή γραμμή
«Trebuchet MS», Helvetica, sans-serif Trebuchet MS 1 Helvetica Σανς σέριφ
Verdana, Γενεύη, sans-serif Verdana Verdana, Γενεύη Σανς σέριφ
Σύμβολο Σύμβολο 2 Σύμβολο 2 -
Webdings Ιστοσελίδες 2 Ιστοσελίδες 2 -
Wingdings, "Zapf Dingbats" Φτερά 2 Zapf Dingbats 2 -
«MS Sans Serif», Γενεύη, sans-serif MS Sans Serif 4 Γενεύη Σανς σέριφ
«MS Serif», «New York», σερίφ MS Serif 4 Νέα Υόρκη 6 ελαφρή γραμμή

1 Οι γραμματοσειρές Georgia και Trebuchet MS συνοδεύονται από Windows 2000/XP και περιλαμβάνονται στο πακέτο γραμματοσειρών IE (και μάλιστα συνοδεύονται από πολλές εφαρμογές της Microsoft), επομένως εγκαθίστανται σε πολλούς υπολογιστές με Windows 98.

2 Οι γραμματοσειρές συμβόλων εμφανίζονται μόνο στον Internet Explorer σε άλλα προγράμματα περιήγησης, συνήθως αντικαθίστανται με μια τυπική γραμματοσειρά (αν και, για παράδειγμα, η γραμματοσειρά Symbol εμφανίζεται στο Opera και το Webdings στο Safari).

3 Η γραμματοσειρά Book Antiqua είναι σχεδόν πανομοιότυπη με την Palatino Linotype. Το Palatino Linotype συνοδεύεται από Windows 2000/XP και το Book Antiqua με Windows 98.

4 Λάβετε υπόψη ότι αυτές οι γραμματοσειρές δεν είναι TrueType, αλλά bitmap, επομένως μπορεί να φαίνονται κακές σε ορισμένα μεγέθη (είναι σχεδιασμένες να εμφανίζονται σε 8, 10, 12, 14, 18 και 24 pt στα 96 DPI).

5 Αυτές οι γραμματοσειρές λειτουργούν μόνο στο Safari σε τυπικό στυλ, αλλά δεν λειτουργούν με έντονους ή πλάγιους χαρακτήρες. Το Comic Sans MS λειτουργεί επίσης με έντονη γραφή, αλλά όχι με πλάγιους χαρακτήρες. Άλλα προγράμματα περιήγησης Mac φαίνεται να μιμούνται τις ιδιότητες γραμματοσειράς που λείπουν από μόνα τους (ευχαριστώ τον Christian Fecteau για την συμβουλή).

6 Αυτές οι γραμματοσειρές εγκαθίστανται σε Mac μόνο με κλασική εγκατάσταση

Στιγμιότυπα οθόνης

  • Mac OS X 10.4.8, Firefox 2.0, ClearType ενεργοποιημένο (ευχαριστούμε τον Juris Vecvanags για το στιγμιότυπο οθόνης)
  • Mac OS X 10.4.4, Firefox 1.5, ClearType ενεργοποιημένο
  • Mac OS X 10.4.11, Safari 3.0.4, ClearType ενεργοποιημένο (ευχαριστώ τον Nolan Gladius για το στιγμιότυπο οθόνης)
  • Mac OS X 10.4.4, Safari 2.0.3, ClearType ενεργοποιημένο (ευχαριστώ τον Eric Zavesky για το στιγμιότυπο οθόνης)
  • Windows Vista, Internet Explorer 7, ClearType ενεργοποιημένο
  • Windows Vista, Firefox 2.0, ClearType ενεργοποιημένο (ευχαριστώ τον Michiel Bijl για το στιγμιότυπο οθόνης)

Όταν ξεκινάτε να δημιουργείτε μια διάταξη, πρέπει να καθορίσετε συγκεκριμένα στο CSS τις γραμματοσειρές που χρησιμοποιούνται στη σελίδα. Συχνά, με διαφορετικές γραμματοσειρές, ο σχεδιαστής πληκτρολογεί όχι μόνο το κύριο κείμενο της σελίδας, αλλά και διάφορες επικεφαλίδες, λογότυπα και μονογράμματα.

Ένας καλός σχεδιαστής, όπως ένας καλός σχεδιαστής διάταξης, γνωρίζει ότι το πρόγραμμα περιήγησης μπορεί να χρησιμοποιήσει μόνο εκείνες τις γραμματοσειρές που είναι εγκατεστημένες στον υπολογιστή του χρήστη για να εμφανίσει μια σελίδα. Δηλαδή, οι γραμματοσειρές μπορούν να χωριστούν σε δύο κατηγορίες:

  1. Γραμματοσειρές που θα εμφανίζονται χωρίς προβλήματα από τη συντριπτική πλειοψηφία των χρηστών.
  2. Γραμματοσειρές που δεν διαθέτει μια αρκετά μεγάλη ομάδα χρηστών.

Εάν ο σχεδιαστής χρησιμοποίησε γραμματοσειρές της δεύτερης κατηγορίας για να δημιουργήσει, για παράδειγμα, ένα λογότυπο ή μεγάλες στατικές επικεφαλίδες, δεν μπορείτε να διστάσετε να χρησιμοποιήσετε την τεχνική αντικατάστασης κειμένου με εικόνα. Το μειονέκτημα της χρήσης αυτής της τεχνικής είναι η ανελαστικότητα. Εάν υπάρχουν αλλαγές στο κείμενο, θα πρέπει να επαναλάβετε την εικόνα και να αλλάξετε το CSS (για παράδειγμα, εάν οι διαστάσεις της νέας εικόνας δεν ταιριάζουν με την παλιά).

Μπορούμε να πούμε ότι ο κίνδυνος χρήσης μιας τεχνικής εξαρτάται άμεσα από την πιθανότητα αλλαγής του κειμένου. Επομένως, για παράδειγμα, το γενικό κείμενο μιας σελίδας δεν μπορεί να γραφτεί με μη τυπικές γραμματοσειρές! Ένας ικανός σχεδιαστής δεν θα το έκανε ποτέ αυτό. Και αν ο σχεδιαστής συναντήσει μια πράσινη γραμματοσειρά, ένας καλός σχεδιαστής διάταξης είναι απλά υποχρεωμένος να διορθώσει το λάθος του - στη διάταξη, αντικαταστήστε αυτήν τη γραμματοσειρά με την πιο παρόμοια τυπική.

Πώς όμως μπορεί κανείς να διακρίνει τις γραμματοσειρές της πρώτης ομάδας από τη δεύτερη; Είναι σαφές ότι δεν μπορείτε να βασιστείτε σε ένα σύνολο γραμματοσειρών εγκατεστημένων απευθείας στον υπολογιστή σας! Ας το καταλάβουμε.

Τυπικές γραμματοσειρές

Οι τυπικές γραμματοσειρές είναι ένα σύνολο γραμματοσειρών που εγκαθίστανται με το λειτουργικό σύστημα. Δεδομένου ότι τα λειτουργικά συστήματα είναι διαφορετικά, το σύνολο των γραμματοσειρών τους είναι διαφορετικό. Λίστα τυπικών γραμματοσειρών εκδόσεις WindowsΜπορείτε να δείτε, για παράδειγμα, στο άρθρο Τυπικές γραμματοσειρές Windows και μια λίστα με τυπικές γραμματοσειρές Mac OS στη σελίδα Γραμματοσειρές που περιλαμβάνονται στο Mac OS. Όσο για τα λειτουργικά συστήματα Unix/Linux, δεν έχουν ούτε ένα σύνολο γραμματοσειρών. Πολλοί χρήστες Linux χρησιμοποιούν το σύνολο γραμματοσειρών DejaVu, ιδιαίτερα στο Ubuntu που είναι εγκατεστημένα από προεπιλογή. Σύμφωνα με στατιστικά στοιχεία από το http://www.codestyle.org, πολλοί χρήστες Unix/Linux έχουν επίσης εγκατεστημένα σύνολα γραμματοσειρών URW, Free και άλλα. Σύμφωνα με τα ίδια στατιστικά στοιχεία, πάνω από το 60% των χρηστών Unix/Linux διαθέτουν γραμματοσειρές από τις βασικές γραμματοσειρές για το Web στον υπολογιστή τους, το οποίο μέχρι το 2002 ήταν επίσημα διαθέσιμο για δωρεάν λήψη στον ιστότοπο της Microsoft.

Προκειμένου η σελίδα να εμφανίζεται όπως προορίζεται για τον σχεδιαστή σε οποιοδήποτε λειτουργικό σύστημα, είναι δυνατό να καθοριστούν πολλές γραμματοσειρές στην ιδιότητα οικογένειας γραμματοσειρών CSS, διαχωρισμένες με κόμματα.

Αυτή η ιδιότητα καθορίζει μια λίστα με προτεραιότητα με ονόματα οικογένειας γραμματοσειρών ή/και γενικά οικογενειακά ονόματα. Σύμφωνα με την προδιαγραφή CSS2, υπάρχουν δύο τύποι οικογενειακών ονομάτων γραμματοσειρών:

  1. Το όνομα της οικογένειας γραμματοσειράς της επιλογής σας. Για παράδειγμα, "Times new Roman", "Arial" και άλλα. Τα οικογενειακά ονόματα γραμματοσειρών που περιέχουν κενά πρέπει να περικλείονται σε εισαγωγικά. Εάν λείπουν εισαγωγικά, τυχόν χαρακτήρες διαστήματος πριν και μετά το όνομα της γραμματοσειράς αγνοούνται και οποιαδήποτε ακολουθία κενών εντός του ονόματος της γραμματοσειράς μετατρέπεται σε ένα ενιαίο διάστημα.
  2. Γενική (κοινή) οικογένεια. Η προδιαγραφή ορίζει τις ακόλουθες γενικές οικογένειες:
    • serif - γραμματοσειρές με σερίφ στα άκρα.
    • sans-serif - γραμματοσειρές sans-serif.
    • γραμματοσειρές γράμματα - πλάγια?
    • φαντασία - διακοσμητικές γραμματοσειρές?
    • monospace - γραμματοσειρά monospace (με γράμματα ίδιου πλάτους).

Τα ονόματα οικογένειας είναι λέξεις-κλειδιά και δεν χρειάζεται να περικλείονται σε εισαγωγικά.

Έτσι, για τη σχεδίαση, λαμβάνεται μια τυπική γραμματοσειρά από το λειτουργικό σύστημα Windows, επιλέγεται μια παρόμοια για Mac OS και Unix/Linux, καθορίζεται μια κοινή οικογένεια γραμματοσειρών και τελειώσατε.

Αλλά δεν είναι τόσο απλό. Ας σκάψουμε με περισσότερες λεπτομέρειες.

Αναζήτηση γραμματοσειρών που είναι ασφαλείς για τον Ιστό

Στο Διαδίκτυο, η έννοια των «ασφαλών» γραμματοσειρών Ιστού έχει αναπτυχθεί ιστορικά. Μια ασφαλής γραμματοσειρά είναι μια γραμματοσειρά που είναι τυπική για όλα τα λειτουργικά συστήματα. Δεδομένου ότι μπορούμε μόνο να ονειρευόμαστε μια τέτοια κατάσταση πραγμάτων, δεν υπάρχουν απολύτως ασφαλείς γραμματοσειρές!

Ορισμένες γραμματοσειρές μπορούν να ονομαστούν ασφαλείς με ορισμένες επιφυλάξεις.

Η βάση για τον ορισμό των «ασφαλών» γραμματοσειρών ήταν οι γραμματοσειρές του πιο συνηθισμένου λειτουργικού συστήματος Windows, οι οποίες χρησιμοποιούνται και σε άλλα λειτουργικά συστήματα. Ένα παράδειγμα τέτοιας χρήσης είναι οι ήδη αναφερθείσες γραμματοσειρές Core για το πακέτο γραμματοσειρών Web, το οποίο, σύμφωνα με στατιστικά στοιχεία, έχει κατεβάσει πολλοί χρήστες Unix/Linux.

Αυτό το πακέτο περιλαμβάνει τις ακόλουθες γραμματοσειρές: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. Όλοι τους υποστηρίζουν το κυριλλικό αλφάβητο, το οποίο είναι σημαντικό για το Runet.

Το σύνολο γραμματοσειρών που συνοδεύει το Mac OS X (αυτό το λειτουργικό σύστημα είναι το πιο ευρέως χρησιμοποιούμενο μεταξύ των χρηστών Mac OS) περιλαμβάνει όλες τις γραμματοσειρές από τις βασικές γραμματοσειρές για το σύνολο Web.

Έτσι, με βάση τις γραμματοσειρές των Windows που χρησιμοποιούνται σε άλλα λειτουργικά συστήματα, σχηματίστηκε η ακόλουθη λίστα με τις λεγόμενες «ασφαλείς» γραμματοσειρές Ιστού:

  1. Arial
  2. Arial Black
  3. Comic Sans MS
  4. Courier New
  5. Γεωργία
  6. Επίπτωση
  7. Times New Roman
  8. Trebuchet MS
  9. Verdana

Η γραμματοσειρά Webdings περιέχει εικονίδια και δεν μπορεί να χρησιμοποιηθεί για περιεχόμενο. Το Andale Mono δεν χρησιμοποιείται ευρέως επειδή δεν είναι κατάλληλο για καθημερινή ανάγνωση οθόνης και δεν το έχουν όλοι οι χρήστες των Windows.

Κάθε χρήστης Windows, Mac OS X και η συντριπτική πλειοψηφία των χρηστών Unix/Linux (δηλαδή αυτοί που έχουν εγκαταστήσει τις γραμματοσειρές Core για το πακέτο Web) έχουν όλες αυτές τις γραμματοσειρές.

Τι γίνεται όμως με τα υπόλοιπα; Μετά από όλα, θέλετε το σχέδιο του σχεδιαστή να το δουν όσο το δυνατόν περισσότεροι χρήστες!

Γραμματοσειρές που υποστηρίζουν κυριλλικά

Ένα συγκεκριμένο χαρακτηριστικό του RuNet είναι το πρόβλημα με τις κωδικοποιήσεις σελίδων και την υποστήριξη κυριλλικών σε γραμματοσειρές. Για να αποφύγετε προβλήματα με διάφορες κωδικοποιήσεις χαρακτήρων, έξυπνοι άνθρωποιεφευρέθηκε το Unicode, το οποίο σας επιτρέπει να συνδυάσετε χαρακτήρες από πολλές γλώσσες σε μία γραμματοσειρά. Έτσι, για σελίδες ρωσικής γλώσσας πρέπει να χρησιμοποιείτε μόνο γραμματοσειρές Unicode που υποστηρίζουν κυριλλικό.

Παρακάτω είναι ένας πίνακας αντιστοιχιών γραμματοσειρών.

Windows MacOS Unix/Linux προγονική οικογένεια
Arial Black Helvetica C.Y. Nimbus Sans L Σανς σέριφ
Arial Helvetica C.Y. Nimbus Sans L Σανς σέριφ
Comic Sans MS Μονακό CY * (Δες παρακάτω) ρέων
Courier New * (Δες παρακάτω) Nimbus Mono L Μονοδιάστημα
Γεωργία * (Δες παρακάτω) Σχολικό βιβλίο αιώνα Λ Ελαφρή γραμμή
Επίπτωση κάρβουνο C.Y. * (Δες παρακάτω) Σανς σέριφ
Times New Roman Times C.Y. Nimbus Roman No9 L Ελαφρή γραμμή
Trebuchet MS Helvetica C.Y. * (Δες παρακάτω) Σανς σέριφ
Verdana Γενεύη C.Y. DejaVu Sans Σανς σέριφ

* στη στήλη απέναντι από τη γραμματοσειρά σημαίνει εγγενή κυριλλικά ισοδύναμα γραμματοσειρά WindowsΤο λειτουργικό σύστημα δεν έχει. Αλλά ταυτόχρονα, υπάρχει μεγάλη πιθανότητα αυτή η ίδια η γραμματοσειρά να εγκατασταθεί απευθείας στο λειτουργικό σύστημα.

Για παράδειγμα, εάν το κύριο κείμενο της διάταξης είναι Arial, βρίσκουμε αυτή τη γραμματοσειρά στον πίνακα και γράφουμε την αντίστοιχη γραμμή στο CSS:

σώμα ( γραμματοσειρά-οικογένεια: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; )

σώμα (

γραμματοσειρά - οικογένεια: Arial, "Helvetica CY", "Nimbus Sans L", sans - serif;

Αυτή η καταχώρηση σημαίνει ότι εάν ο χρήστης έχει τη γραμματοσειρά Arial (και όλοι οι χρήστες των Windows και όλοι χρήστες Mac OS X), τότε η σελίδα θα εμφανιστεί με αυτήν τη γραμματοσειρά. Εάν ο χρήστης δεν έχει αυτή τη γραμματοσειρά, τότε η σελίδα Ρωσόφωνος χρήστηςΤο Mac OS 9 θα εμφανίζεται σίγουρα στάνταρ γραμματοσειρά συστήματος Helvetica CY, και για έναν χρήστη Unix/Linux θα εμφανίζεται με τη γραμματοσειρά Nimbus Sans L, η οποία είναι εγκατεστημένη στο 90% των χρηστών Unix/Linux. Εάν ο χρήστης Unix/Linux βρίσκεται στο 10% που δεν έχει αυτήν τη γραμματοσειρά, τότε η σελίδα θα εμφανίζεται με τη γραμματοσειρά serif που έχει οριστεί από προεπιλογή για την προβολή ιστοσελίδων.

Εκτός από το γεγονός ότι ο πίνακας λαμβάνει υπόψη τις γραμματοσειρές Unix/Linux, μετά τη συνηθισμένη Helvetica υπάρχει κάποιο είδος περίεργο εικονίδιο C.Y. Ας καταλάβουμε τι είναι!

Πριν από την κυκλοφορία του Mac OS X, αυτή η γραμμή είχε την εξής σημασία: για χρήστες Windows, εμφανίζουμε τη σελίδα σε Arial, για χρήστες Mac OS 9, με την τυπική γραμματοσειρά Helvetica και για τα υπόλοιπα, βλέπουμε τη σελίδα στο σύστημα γραμματοσειρά sans-serif, η οποία έχει ρυθμιστεί από προεπιλογή στο πρόγραμμα περιήγησης. Αλλά και πάλι, μια σημαντική απόχρωση! Η τυπική γραμματοσειρά Mac OS 9 Helvetica δεν έχει κυριλλική! Για τη σελίδα στη ρωσική γλώσσα, αυτό σήμαινε το εξής: για χρήστες Windows εμφανίζουμε τη σελίδα Arial, για χρήστες Mac OS 9 - με την τυπική γραμματοσειρά Helvetica, η οποία εμφανίζει μη αναγνώσιμες πληροφορίες και οι υπόλοιποι δείτε τη σελίδα με το σύστημα sans-serif γραμματοσειρά που έχει ρυθμιστεί από προεπιλογή στο πρόγραμμα περιήγησης.

Για σωστή εμφάνισηΑυτό το σύνολο για χρήστες Mac OS 9, αντί για μη κυριλλοποιημένο Helvetica, είναι λογικό να προσδιορίζεται η ίδια τυπική γραμματοσειρά Helvetica CY για Mac OS 9, που να περιέχει κυριλλικό.

Η ανάγνωση των χάρακα έχει αλλάξει από την κυκλοφορία του Mac OS X. Υπάρχει πλέον μια κοινή τυπική γραμματοσειρά που καθορίζεται για Windows/Mac OS X. Και αν θέλουμε οι χρήστες του Mac OS 9 να μπορούν να δουν την πρόθεση του σχεδιαστή, πρέπει να συμπεριλάβουμε μια γραμματοσειρά που να περιέχει κυριλλικό στη γραμμή γραμματοσειράς.

Έτσι, ενώ δεν υπάρχουν ασφαλείς γραμματοσειρές, υπάρχουν ασφαλείς οικογένειες γραμματοσειρών. Καλούνται επίσης στοίβες CSS γραμματοσειρών. Εκτός από τις τυπικές γραμματοσειρές Windows/Mac OS X, αυτές οι γραμμές μπορούν επίσης να περιλαμβάνουν ισοδύναμες γραμματοσειρές από τυπικό σετ Mac OS 9 (το οποίο δεν περιέχει "ασφαλείς" γραμματοσειρές από προεπιλογή) και κοινές γραμματοσειρές Unix/Linux.

Οποιοσδήποτε σχεδιαστής διάταξης συναντά αργά ή γρήγορα μια στιγμή που ένας σχεδιαστής χρησιμοποιεί μια γραμματοσειρά σε μια διάταξη που δεν περιλαμβάνεται στη λίστα των "ασφαλών" γραμματοσειρών. Αυτός όμως δεν είναι ακόμη λόγος για να κρούσετε τον κώδωνα του κινδύνου! Για παράδειγμα, οι σχεδιαστές χρησιμοποιούν πολύ συχνά τη γραμματοσειρά Tahoma σε διατάξεις, η οποία δεν περιλαμβάνεται σε αυτήν τη λίστα. Μια σωστά κατασκευασμένη γραμμή γραμματοσειρών ανοίγει τη δυνατότητα χρήσης όχι μόνο του Tahoma, αλλά και άλλων γραμματοσειρών. Ολα μεγάλη ποσότηταοι σχεδιαστές εκμεταλλεύονται αυτή την ευκαιρία και ένας ικανός σχεδιαστής διάταξης θα πρέπει να το γνωρίζει.

Ακολουθεί ένας πρόσθετος πίνακας γραμματοσειρών που δεν περιλαμβάνονται στη λίστα με τις «ασφαλείς» γραμματοσειρές, αλλά μπορούν να χρησιμοποιηθούν σε διατάξεις.

Windows MacOS προγονική οικογένεια
Κονσόλα Lucida Μονακό Μονοδιάστημα
Lucida Sans Unicode Λουσίντα Γκράντε Σανς σέριφ
Ταχόμα Γενεύη C.Y. Σανς σέριφ

Τι γίνεται αν δεν υπάρχει κυριλλικό αλφάβητο;

Για τα αγγλόφωνα κείμενα, οι παραπάνω πίνακες έχουν ελαφρώς διαφορετική εμφάνιση.

Windows MacOS Unix/Linux προγονική οικογένεια
Arial Black Επινόημα Nimbus Sans L Σανς σέριφ
Arial Helvetica Nimbus Sans L Σανς σέριφ
Comic Sans MS Μονακό TSCu_Comic ρέων
Courier New Μεταφορέας Nimbus Mono L Μονοδιάστημα
Γεωργία * (Δες παρακάτω) Σχολικό βιβλίο αιώνα Λ Ελαφρή γραμμή
Επίπτωση Ξυλάνθρακας Ρέκα Σανς σέριφ
Times New Roman Φορές Nimbus Roman No9 L Ελαφρή γραμμή
Trebuchet MS Helvetica Γκαρούντα Σανς σέριφ
Verdana Γενεύη DejaVu Sans Σανς σέριφ

Για τις γραμματοσειρές Arial, Courier New και Times New Roman, όταν δημιουργείτε χάρακες, είναι καλύτερο να καθορίσετε πρώτα τη γραμματοσειρά Unix/Linux και μετά τη γραμματοσειρά Mac OS. Αυτό οφείλεται σε κάποια στραβή του συνόλου των βασικών γραμματοσειρών Linux X11.

Οι γραμματοσειρές που δεν περιλαμβάνονται στη λίστα "ασφαλής", αλλά μπορούν να χρησιμοποιηθούν σε διατάξεις, ορίζονται καλύτερα από στοίβες γραμματοσειρών CSS που βασίζονται σε αυτόν τον πίνακα.

Windows MacOS Unix/Linux προγονική οικογένεια
Κονσόλα Lucida Μονακό - Μονοδιάστημα
Lucida Sans Unicode Λουσίντα Γκράντε Γκαρούντα Σανς σέριφ
Palatino Linotype Παλατίνο Γκαρούντα** Σανς σέριφ
Ταχόμα Γενεύη Καλιμάτη Σανς σέριφ

Μια παύλα στη στήλη Unix/Linux υποδεικνύει ότι οι χρήστες αυτών των λειτουργικών συστημάτων πιθανότατα θα δουν την προεπιλεγμένη γραμματοσειρά στη σελίδα.

** Σε αυτή τη γραμμή, είναι λογικό να τοποθετήσετε τη γραμματοσειρά Garuda πριν από το Palatino (βλ. εξήγηση παραπάνω).

Συμπεράσματα:

  1. Δεν υπάρχουν απολύτως ασφαλείς γραμματοσειρές. Οι ακόλουθες γραμματοσειρές μπορούν να θεωρηθούν ασφαλείς υπό όρους:
    • Arial
    • Arial Black
    • Comic Sans MS
    • Courier New
    • Γεωργία
    • Επίπτωση
    • Times New Roman
    • Trebuchet MS
    • Verdana
  2. Ασφαλείς στοίβες CSS που λαμβάνουν υπόψη την υποστήριξη για το κυριλλικό αλφάβητο σε γραμματοσειρές μπορείτε να βρείτε στο άρθρο.
  3. Εάν η υποστήριξη για το κυριλλικό αλφάβητο δεν είναι σημαντική στη σελίδα, χρησιμοποιούμε τις στοίβες CSS από το άρθρο.


Συνιστούμε να διαβάσετε