Μέγεθος γραμματοσειράς - CSS-Κόλπα

Η font-sizeιδιότητα καθορίζει το μέγεθος ή το ύψος της γραμματοσειράς. font-sizeεπηρεάζει όχι μόνο τη γραμματοσειρά στην οποία εφαρμόζεται, αλλά χρησιμοποιείται επίσης για τον υπολογισμό της τιμής των μονάδων em, rem και ex length.

p ( font-size: 20px; )

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

Οι τιμές μήκους (π.χ. px, em, rem, ex, κ.λπ.) στις οποίες εφαρμόζονται font-sizeδεν μπορούν να είναι αρνητικές.

Απόλυτες λέξεις-κλειδιά και τιμές

.element ( font-size: small; )

Αποδέχεται τις ακόλουθες απόλυτες τιμές λέξεων-κλειδιών:

xx-small
x-small
small
medium
large
x-large
xx-large

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

Άλλες απόλυτες τιμές περιλαμβάνουν mm(χιλιοστά), cm(εκατοστά), in(ίντσες), pt(σημεία) και pc(picas). Ένα σημείο ισούται με το 1/72 της ίντσας ενώ ένα pica είναι ίσο με 12 σημεία - αυτές οι τιμές χρησιμοποιούνται συνήθως για έντυπα έγγραφα.

Σχετικές λέξεις-κλειδιά

.element ( font-size: larger; )

larger
smaller

Για παράδειγμα, εάν το γονικό στοιχείο έχει μέγεθος γραμματοσειράς small, ένα θυγατρικό στοιχείο με καθορισμένο σχετικό μέγεθος largerθα κάνει το μέγεθος γραμματοσειράς ίσο με mediumτο θυγατρικό στοιχείο.

Ποσοστιαίες τιμές

.element ( font-size: 110%; )

Οι ποσοστιαίες τιμές, όπως η ρύθμιση μεγέθους γραμματοσειράς 110%, σχετίζονται επίσης με το μέγεθος γραμματοσειράς του γονικού στοιχείου, όπως φαίνεται στην παρακάτω επίδειξη:

Δείτε το Pen qdbELL από CSS-Tricks (@ css-tricks) στο CodePen.

Η μονάδα em

.element ( font-size: 2em; )

Η μονάδα em είναι μια σχετική μονάδα με βάση την υπολογισμένη τιμή του μεγέθους γραμματοσειράς του γονικού στοιχείου. Αυτό σημαίνει ότι τα παιδικά στοιχεία εξαρτώνται πάντα από τον γονέα τους για να ορίσουν το μέγεθος της γραμματοσειράς τους. Για παράδειγμα:

 
This is a heading
This is some text.

.container ( font-size: 16px; ) p ( font-size: 1em; ) h2 ( font-size: 2em; )

Στο παραπάνω παράδειγμα, η παράγραφος θα έχει μέγεθος γραμματοσειράς 16px επειδή 1 x 16 = 16px ενώ η επικεφαλίδα θα είναι 32px επειδή 2 x 16 = 32px. Υπάρχουν πολλά πλεονεκτήματα στην κλιμάκωση τύπου ανάλογα με το μέγεθος της γραμματοσειράς του γονικού στοιχείου, δηλαδή μπορούμε να τυλίξουμε στοιχεία μέσα σε ένα δοχείο και να γνωρίζουμε ότι όλα τα παιδιά θα είναι πάντα συγγενικά μεταξύ τους:

Δείτε το στυλό Υπολογίζοντας πώς λειτουργεί η μονάδα em από CSS-Tricks (@ css-tricks) στο CodePen.

Η μονάδα rem

Στην περίπτωση μονάδων rem, ωστόσο, το μέγεθος της γραμματοσειράς εξαρτάται από την τιμή του ριζικού στοιχείου (ή του htmlστοιχείου).

html ( font-size: 16px; ) p ( font-size: 1.5rem; )

Στο παραπάνω παράδειγμα, η μονάδα rem είναι ίση με 16px (επειδή κληρονομείται από το htmlστοιχείο / root) και έτσι το μέγεθος της γραμματοσειράς για όλα τα στοιχεία παραγράφου θα υπολογίζεται σε 24px (1,5 x 16 = 24). Σε αντίθεση με τις μονάδες em, η παράγραφος θα αγνοήσει το στυλ όλων των γονέων της εκτός από τη ρίζα.

Αυτή η μονάδα υποστηρίζεται από τα ακόλουθα προγράμματα περιήγησης:

Χρώμιο	Σαφάρι	Firefox	ΛΥΡΙΚΗ ΣΚΗΝΗ	ΙΕ	Android	iOS
Εργα	Εργα	Εργα	Εργα	10+	Εργα	Εργα

Η πρώην μονάδα

.element ( font-size: 20ex; )

Για πρώην μονάδες, το 1ex θα είναι ίσο με το υπολογισμένο ύψος του πεζού γράμματος x του ριζικού στοιχείου. Έτσι, στο παρακάτω παράδειγμα το htmlστοιχείο έχει οριστεί 20pxκαι όλα τα άλλα μεγέθη γραμματοσειρών καθορίζονται από το ύψος x της συγκεκριμένης γραμματοσειράς.

Δείτε το στυλό Υπολογίζοντας πώς λειτουργεί η πρώην μονάδα από CSS-Tricks (@ css-tricks) στο CodePen.

Πειραματιστείτε με το demo παραπάνω αντικατάσταση μου το font-familyστο htmlστοιχείο για να δείτε πώς το άλλο font-μεγέθη αλλαγή.

Μονάδες προβολής

.element-one ( font-size: 100vh; ) .element-two ( font-size: 100vw; )

Οι μονάδες θύρας προβολής , όπως vwκαι vh, ορίζουν το μέγεθος γραμματοσειράς ενός στοιχείου σε σχέση με τις διαστάσεις της θύρας προβολής:

1vw = 1% του πλάτους της θύρας προβολής
1vh = 1% του ύψους της θύρας προβολής

Αν λοιπόν πάρουμε το ακόλουθο παράδειγμα:

.element ( font-size: 100vh; )

Στη συνέχεια, αυτό θα δηλώσει ότι το μέγεθος της γραμματοσειράς του στοιχείου πρέπει πάντα να είναι 100% του ύψους της θύρας προβολής ανά πάσα στιγμή (50vh θα είναι 50%, 15vh θα είναι 15% και ούτω καθεξής). Στην παρακάτω επίδειξη δοκιμάστε να αλλάξετε το μέγεθος του ύψους του παραδείγματος για να δείτε το τέντωμα τύπου:

Δείτε τον τύπο μεγέθους στυλό με μονάδες vh από CSS-Tricks (@ css-tricks) στο CodePen.

vw Οι μονάδες είναι διαφορετικές στο ότι ορίζει το ύψος των γραμμάτων με το πλάτος της θύρας προβολής, οπότε στην παρακάτω επίδειξη θα χρειαστεί να αλλάξετε το μέγεθος του παραθύρου του προγράμματος περιήγησης για να δείτε αυτές τις αλλαγές:

Δείτε τον τύπο μεγέθους στυλό με μονάδες vw από CSS-Tricks (@ css-tricks) στο CodePen.

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

Χρώμιο	Σαφάρι	Firefox	ΛΥΡΙΚΗ ΣΚΗΝΗ	ΙΕ	Android	iOS
31+	7+	31+	27+	9+	4.4+	7.1+

Είναι σημαντικό να σημειωθεί ότι υπάρχουν δύο άλλες ενότητες προβολής: vminκαι vmax. Το πρώτο θα βρει τις τιμές vhκαι vwκαι θα ορίσει το μέγεθος της γραμματοσειράς ως το μικρότερο από τα δύο ενώ vmaxορίζει το μέγεθος της γραμματοσειράς στη μεγαλύτερη από αυτές τις δύο τιμές.

Η μονάδα ch

.element ( font-size: 24ch; )

Η chμονάδα είναι παρόμοια με τη exμονάδα στο ότι θα ορίσει το μέγεθος της γραμματοσειράς ενός στοιχείου σε σχέση με το πλάτος του 0 (μηδέν) γλύφου της γραμματοσειράς:

Δείτε τον τύπο μεγέθους στυλό με μονάδες ch από CSS-Tricks (@ css-tricks) στο CodePen.

Αυτή η μονάδα υποστηρίζεται από: