Σύνθεση γραμματοσειρών - CSS-Κόλπα

Anonim

Η font-systhesisιδιότητα στο CSS παρέχει στο πρόγραμμα περιήγησης οδηγίες για το πώς να χειρίζεται γραμματοσειρά με έντονους χαρακτήρες και πλάγιους χαρακτήρες όταν το καθορισμένο font-familyδεν τις περιλαμβάνει.

Ας πάρουμε το Lato από τις Γραμματοσειρές Google ως παράδειγμα. Λέει ότι υπάρχουν 10 διαφορετικές παραλλαγές της γραμματοσειράς.

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

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

Όμως, δεν περιλαμβάνουν όλες οι γραμματοσειρές αρχεία για τη διαχείριση βάρους και στυλ. Σε αυτές τις περιπτώσεις, το πρόγραμμα περιήγησης «συνθέτει» την ίδια την εμφάνιση. Το πρόγραμμα περιήγησης κάνει ό, τι μπορεί, αλλά το faux bolding και το στυλ καθιστούν το κείμενο λιγότερο ευανάγνωστο. δηλαδή, λιγότερο ευανάγνωστη από μια πραγματικά σχεδιασμένη έκδοση. Στις πιο ήπιες περιπτώσεις, μπορεί να παρατηρήσουμε αλληλεπικάλυψη χαρακτήρων. Σε πιο σοβαρές περιπτώσεις, το κείμενο είναι εντελώς δυσανάγνωστο ή μπορεί ακόμη και να αλλάξει το νόημα - όπως θα μπορούσε να συμβεί με γλώσσες όπως τα κινέζικα, τα ιαπωνικά, τα κορεατικά και άλλα λογότυπα.

Εκεί font-synthesisμπαίνει. Ελέγχει ποιες γραμματοσειρές επιτρέπεται στη σύνθεση του προγράμματος περιήγησης.

Σύνταξη

.element ( font-synthesis: none | ( weight || style ); )

Στα απλά αγγλικά, αυτό σημαίνει ότι font-synthesisθα αποδεχτείτε:

  • μια τιμή none
  • είτε weightείτεstyle
  • weightκαι τα δύο καιstyle

Αξίζει να σημειωθεί ότι font-synthesisθεωρείται μια στενή ιδιοκτησία. Σύμφωνα με τις προδιαγραφές, είναι ένας συνδυασμός font-synthesis-weightκαι font-synthesis-styleόπου και οι δύο δέχονται τιμές autoή none. Δεδομένου ότι είναι δυνατό να έχετε το ίδιο αποτέλεσμα χρησιμοποιώντας το στενό, αυτός είναι ίσως ο καλύτερος τρόπος να πάτε.

Αξίες

  • none: Ούτε τολμηρές ούτε πλάγιες μπορούν να συντεθούν
  • weight: Το έντονο μπορεί να συντεθεί από το πρόγραμμα περιήγησης
  • style: Το λοξό μπορεί να συντεθεί από το πρόγραμμα περιήγησης
font-synthesis: none; /* browser will not synthesize any font faces */ font-synthesis: style; /* browser will not synthesize a bold font face */ font-synthesis: weight; /* browser will not synthesize an oblique font face */ font-synthesis: weight style; /* browser will synthesize bold and oblique faces if they are unavailable */

Χρήση

font-synthesisμπορεί να χρησιμοποιηθεί με όλα τα στοιχεία, συμπεριλαμβανομένων των ::first-letterκαι ::first-lineψευδο-στοιχείων.

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

/* Disables synthetic bolded and obliqued characters in Arabic */ *:lang(ar) ( font-synthesis: none; )

Διαδήλωση

Υποστήριξη προγράμματος περιήγησης

Τη στιγμή της σύνταξης, η caniuse αναφέρει συνολική κάλυψη 20,21% για το font-synthesisακίνητο.

Επιφάνεια εργασίας

ΙΕ Ακρη Firefox Χρώμιο Σαφάρι ΛΥΡΙΚΗ ΣΚΗΝΗ
Οχι Οχι 34+ Οχι 9+ Οχι

Κινητό

iOS Safari Opera Mini Πρόγραμμα περιήγησης Android Chrome για Android Firefox για Android
9+ Ολα Οχι Οχι 68

Θέλετε να χρησιμοποιήσετε font-synthesisμέσω email; Το Campaign Monitor αναφέρει ότι υποστηρίζεται από τους ακόλουθους πελάτες:

  • Apple Mail 10+
  • Outlook για Mac
  • Εφαρμογή AOL Alto iOS
  • iOS Mail 10+
  • Σπουργίτης
  • G Suite
  • Gmail
  • Εισερχόμενα Google

Περισσότερες πληροφορίες

  • CSS Fonts Module Επίπεδο 4 Προδιαγραφή
  • "Δοκιμή CSS3: font-synthesis" από τον Eric Meyer
  • "Πώς να πλάγια κείμενο" του Chris Coyier