Γραμματοσειρά - CSS-Κόλπα

Η fontιδιότητα στο CSS είναι μια στενή ιδιότητα που συνδυάζει όλες τις ακόλουθες δευτερεύουσες ιδιότητες σε μία δήλωση.

body ( font: normal small-caps normal 16px/1.4 Georgia; ) /* is the same as: body ( font-family: Georgia; line-height: 1.4; font-weight: normal; font-stretch: normal; font-variant: small-caps; font-size: 16px; ) */

Υπάρχουν επτά fontυπο-ιδιότητες, όπως:

font-stretch: αυτή η ιδιότητα ορίζει το πλάτος της γραμματοσειράς, όπως συμπυκνωμένη ή εκτεταμένη.
- normal
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
font-style: κάνει το κείμενο να φαίνεται πλάγιο ή πλάγιο.
- normal
- italic
- oblique
- inherit
font-variant: αλλάζει το κείμενο προορισμού σε μικρά κεφαλαία.
- normal
- small-caps
- inherit
font-weight: ορίζει το βάρος ή το πάχος της γραμματοσειράς.
- normal
- bold
- bolder
- lighter
- 100, 200, 300, 400, 500, 600, 700, 800, 900
- inherit
font-size: ορίζει το ύψος της γραμματοσειράς.
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller, larger
- percentage
- inherit
line-height: καθορίζει την ποσότητα χώρου πάνω και κάτω από τα ενσωματωμένα στοιχεία.
- normal
- number (font-size multiplier)
- percentage
font-family: καθορίζει τη γραμματοσειρά που εφαρμόζεται στο στοιχείο.
- sans-serif
- serif
- monospace
- cursive
- fantasy
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
- "string"

Γραμματοσειρά Shorthand Gotchas

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

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

Υποχρεωτικές αξίες

Δύο από τις τιμές σε fontστενό είναι υποχρεωτικές: font-sizeκαι font-family. Εάν ένα από αυτά δεν συμπεριληφθεί, ολόκληρη η δήλωση θα αγνοηθεί.

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

Προαιρετικές τιμές

Και οι πέντε από τις άλλες τιμές είναι προαιρετικές. Εάν συμπεριλάβετε κάποιο από τα font-style, font-variantκαι font-weight, πρέπει να εμφανίζονται προηγουμένως font-sizeστη δήλωση. Εάν δεν είναι, θα αγνοηθούν και μπορεί επίσης να προκαλέσουν την παράβλεψη των υποχρεωτικών τιμών.

body ( font: italic small-caps bold 44px Georgia, sans-serif; )

Στο παραπάνω παράδειγμα, περιλαμβάνονται τρεις προαιρετικές επιλογές. Εφόσον αυτά ορίζονται προηγουμένως font-size, μπορούν να τοποθετηθούν με οποιαδήποτε σειρά.

Η συμπερίληψη line-heightείναι επίσης προαιρετική, αλλά μπορεί να δηλωθεί μόνο μετά font-sizeκαι μόνο μετά από κάθετο:

body ( font: 44px/20px Georgia, sans-serif; )

Στο παραπάνω παράδειγμα, line-heightείναι το "20px". Εάν παραλείψετε line-height, πρέπει επίσης να παραλείψετε την κάθετο, αλλιώς ολόκληρη η γραμμή θα αγνοηθεί.

Χρησιμοποιώντας γραμματοσειρά

Το font-stretchακίνητο είναι νέα στο CSS3, ώστε αν χρησιμοποιείται σε ένα παλαιότερο πρόγραμμα περιήγησης που δεν υποστηρίζει font-stretchτο fontστενογραφία, θα προκαλέσει ολόκληρη η γραμμή που πρέπει να αγνοηθεί.

Η προδιαγραφή σας προτείνει να συμπεριλάβετε ένα εναλλακτικό χωρίς font-stretch, όπως αυτό:

body ( font: italic small-caps bold 44px Georgia, sans-serif; /* fallback for older browsers */ font: ultra-condensed italic small-caps bold 44px Georgia, sans-serif; )

Κληρονομικότητα για προαιρετικά

Εάν παραλείψετε οποιαδήποτε από τις οπτικές τιμές (συμπεριλαμβανομένων line-height), τα παραλειφθέντα προαιρετικά δεν θα κληρονομήσουν τιμές από το γονικό τους στοιχείο, όπως συμβαίνει συχνά με τυπογραφικές ιδιότητες. Αντ 'αυτού, θα επαναφερθούν στην αρχική τους κατάσταση.

Για παράδειγμα:

body ( font: italic small-caps bold 44px/50px Georgia, sans-serif; ) p ( font: 30px Georgia, sans-serif; )

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

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

Λέξεις-κλειδιά για τον καθορισμό γραμματοσειρών συστήματος

Εκτός από την παραπάνω σύνταξη, η fontιδιότητα επιτρέπει επίσης τη χρήση λέξεων-κλειδιών ως τιμών. Αυτοί είναι:

caption
icon
menu
message-box
small-caption
status-bar

Αυτές οι τιμές λέξεων-κλειδιών ορίζουν τη γραμματοσειρά σε αυτήν που χρησιμοποιείται στο λειτουργικό σύστημα του χρήστη για τη συγκεκριμένη κατηγορία. Για παράδειγμα, ο ορισμός "λεζάντα" θα ρυθμίσει τη γραμματοσειρά σε αυτό το στοιχείο να χρησιμοποιεί την ίδια γραμματοσειρά που χρησιμοποιείται στο λειτουργικό σύστημα για λεζάντες ελέγχου (κουμπιά, αναπτυσσόμενα, κ.λπ.).

Μια μεμονωμένη λέξη-κλειδί περιλαμβάνει ολόκληρη την τιμή:

body ( font: menu; )

Οι άλλες ιδιότητες που αναφέρθηκαν παραπάνω δεν είναι έγκυρες σε συνδυασμό με αυτές τις λέξεις-κλειδιά. Αυτές οι λέξεις-κλειδιά μπορούν να χρησιμοποιηθούν μόνο με fontστενό και δεν μπορούν να δηλωθούν χρησιμοποιώντας καμία από τις μεμονωμένες ιδιότητες longhand.