Η προεπιλογή στη γραμματοσειρά συστήματος ενός συγκεκριμένου λειτουργικού συστήματος μπορεί να αυξήσει την απόδοση, επειδή το πρόγραμμα περιήγησης δεν χρειάζεται να κατεβάσει αρχεία γραμματοσειρών, χρησιμοποιεί αυτό που είχε ήδη. Αυτό ισχύει όμως για οποιαδήποτε γραμματοσειρά "ασφαλής στο διαδίκτυο" Η ομορφιά των γραμματοσειρών «συστήματος» είναι ότι ταιριάζει με αυτό που χρησιμοποιεί το τρέχον λειτουργικό σύστημα, οπότε μπορεί να είναι μια άνετη εμφάνιση.
Ποιες είναι αυτές οι γραμματοσειρές συστήματος; Τη στιγμή αυτής της γραφής, κατανέμεται ως εξής:
| Λειτουργικό σύστημα | Εκδοχή | Γραμματοσειρά συστήματος |
|---|---|---|
| Mac OS X | Ελ Καπιτάν | Σαν Φρανσίσκο |
| Mac OS X | Yosemite | Helvetica Neue |
| Mac OS X | Μάβερικς | Λουκίδα Γκράντε |
| Παράθυρα | Μακρινή θέα | Segoe UI |
| Παράθυρα | XP | Ταχόμα |
| Παράθυρα | 3.1 σε ΜΕ | Microsoft Sans Serif |
| Android | Παγωτό Σάντουιτς (4.0) + | Ρομπότο |
| Android | Cupcake (1.5) έως κηρήθρα (3.2.6) | Droid Sans |
| Ubuntu | Όλες οι εκδόσεις | Ubuntu |
Μεταβείτε στο απόσπασμα, ήδη!
Ο λόγος για τον πρόλογο είναι ότι δείχνει πόσο βαθιά μπορεί να χρειαστεί να επιστρέψετε στην υποστήριξη γραμματοσειρών συστήματος. Επιπλέον, αποδεικνύει ότι με νέες εκδόσεις συστήματος, έρχονται νέες γραμματοσειρές και, ως εκ τούτου, η πιθανότητα να χρειάζεται να ενημερώσετε τη στοίβα γραμματοσειρών σας.
Μέθοδος 1: Γραμματοσειρές συστήματος σε επίπεδο στοιχείου
Τα Chrome και Safari απέστειλαν πρόσφατα το "system-ui", το οποίο είναι μια γενική οικογένεια γραμματοσειρών που μπορεί να χρησιμοποιηθεί στη θέση "-apple-system" και "BlinkMacSystemFont" στα ακόλουθα παραδείγματα. Συμβουλή καπέλου στον JJ για τις πληροφορίες.Μια μέθοδος για την εφαρμογή γραμματοσειρών συστήματος είναι να τις καλέσετε απευθείας σε ένα στοιχείο χρησιμοποιώντας την font-familyιδιότητα.
Το GitHub χρησιμοποιεί αυτήν τη μέθοδο στον ιστότοπό του, εφαρμόζοντας γραμματοσειρές συστήματος στο bodyστοιχείο:
/* System Fonts as used by GitHub */ body ( font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; )Τόσο το Medium όσο και ο διαχειριστής του WordPress χρησιμοποιούν μια παρόμοια προσέγγιση, με μια μικρή παραλλαγή, κυρίως υποστήριξη για το Oxygen Sans (δημιουργήθηκε για το λειτουργικό σύστημα GNU + Linux) και το Cantarell (δημιουργήθηκε για το λειτουργικό σύστημα GNOME). Αυτό το απόσπασμα μειώνει επίσης την υποστήριξη για ορισμένους τύπους emoji και συμβόλων:
/* System Fonts as used by Medium and WordPress */ body ( font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; )Σημείωση: Αυτή η μέθοδος θα πρέπει να χρησιμοποιείται μόνο στην font-familyιδιότητα και όχι στο fontστενό. Η Booking.com δημοσίευσε μια λεπτομερή αναγραφή στις προειδοποιήσεις που δημιουργεί λόγω της αρχικής γραμματοσειράς που φαίνεται να είναι πρόθεμα προμηθευτή.
Μέθοδος 2: Στοίβες γραμματοσειρών συστήματος
Ο περιορισμός της πρώτης μεθόδου είναι ότι πρέπει να καλείτε ολόκληρη τη στοίβα των γραμματοσειρών κάθε φορά που χρησιμοποιείται σε ένα στοιχείο και αυτό μπορεί να πάρει δυσκίνητο και να φουσκώσει τον κώδικά σας, ανάλογα με το πού και πώς χρησιμοποιείται.
Ο Jonathan Neal προσφέρει μια εναλλακτική μέθοδο όπου οι γραμματοσειρές συστήματος δηλώνονται χρησιμοποιώντας @font-face.
Το πλεονέκτημα εδώ είναι ότι μπορείτε να δηλώσετε τις γραμματοσειρές μία φορά και στη συνέχεια αυτό γίνεται το πράγμα που μπορείτε στην font-familyιδιοκτησία αντί για τη μεγάλη λίστα γραμματοσειρών κάθε φορά.
/* Define the "system" font family */ @font-face ( font-family: system; font-style: normal; font-weight: 300; src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma"); ) /* Now, let's apply it on an element */ body ( font-family: "system"; )Λάβετε υπόψη ότι το πλήρες παράδειγμα του Jonathan απεικονίζει τη δυνατότητα καθορισμού παραλλαγών της systemοικογένειας γραμματοσειρών που ορίστηκε στο απόσπασμα παραπάνω για να ληφθούν υπόψη πλάγια γράμματα, έντονα γράμματα και επιπλέον βάρη.
Σχετιζομαι με
- Ειδικές γραμματοσειρές OS σε CSS - η οποία περιλαμβάνει μια μέθοδο JavaScript για τη δοκιμή της γραμματοσειράς που χρησιμοποιείται.
- Γραμματοσειρές συστήματος σε SVG
- Εφαρμογή γραμματοσειρών συστήματος στο Booking.com - Ένα μάθημα που μαθαίνεται - Το Booking.com μοιράζεται πώς έμαθαν χρησιμοποιώντας μια στοίβα γραμματοσειρών συστήματος στο
fontστενό δεν λειτουργεί όπως αναμενόταν.