Χρησιμοποιώντας το Ems για να αλλάξετε τα μεγέθη των γραμματοσειρών
Όταν δημιουργείτε μια ιστοσελίδα, οι περισσότεροι επαγγελματίες συστήνουν να χρησιμοποιείτε γραμματοσειρές μεγέθους (και μάλιστα τα πάντα) με ένα σχετικό μέτρο όπως ems, exs, ποσοστά ή pixels. Αυτό συμβαίνει επειδή πραγματικά δεν γνωρίζετε όλους τους διαφορετικούς τρόπους με τους οποίους κάποιος μπορεί να δει το περιεχόμενό σας. Και αν χρησιμοποιείτε ένα απόλυτο μέτρο (ίντσες, εκατοστά, χιλιοστά, σημεία ή picas) μπορεί να επηρεάσει την εμφάνιση ή την αναγνωσιμότητα της σελίδας σε διαφορετικές συσκευές.
Και το W3C συνιστά να χρησιμοποιείτε ems για μεγέθη.
Αλλά πόσο μεγάλο είναι ένα Em;
Σύμφωνα με το W3C ένα em:
"ισούται με την υπολογιζόμενη τιμή της ιδιότητας" font-size "του στοιχείου στο οποίο χρησιμοποιείται. Η εξαίρεση είναι όταν το 'em' εμφανίζεται στην τιμή της ίδιας της ιδιότητας 'font-size', οπότε αναφέρεται στο μέγεθος γραμματοσειράς του γονικού στοιχείου. "
Με άλλα λόγια, τα ems δεν έχουν απόλυτο μέγεθος. Αναλαμβάνουν τις τιμές μεγέθους τους με βάση το πού βρίσκονται. Για τους περισσότερους σχεδιαστές ιστοσελίδων , αυτό σημαίνει ότι είναι σε ένα πρόγραμμα περιήγησης στο Web, οπότε μια γραμματοσειρά που έχει ύψος 1em έχει ακριβώς το ίδιο μέγεθος με το προεπιλεγμένο μέγεθος γραμματοσειράς για το συγκεκριμένο πρόγραμμα περιήγησης.
Αλλά πόσο ψηλά είναι το προεπιλεγμένο μέγεθος; Δεν υπάρχει τρόπος να είμαστε 100% βέβαιοι, καθώς οι πελάτες μπορούν να αλλάξουν το προεπιλεγμένο μέγεθος γραμματοσειράς στα προγράμματα περιήγησής τους, αλλά επειδή οι περισσότεροι άνθρωποι δεν μπορούν να υποθέσουν ότι τα περισσότερα προγράμματα περιήγησης έχουν προεπιλεγμένο μέγεθος γραμματοσειράς 16px. Έτσι, τις περισσότερες φορές 1em = 16px .
Σκεφτείτε στα εικονοστοιχεία, χρησιμοποιήστε τα Ems για το μέτρο
Αφού γνωρίζετε ότι το προεπιλεγμένο μέγεθος γραμματοσειράς είναι 16px, μπορείτε στη συνέχεια να χρησιμοποιήσετε το ems για να επιτρέψετε στους πελάτες σας να αλλάξουν το μέγεθος της σελίδας εύκολα αλλά να σκεφτούν σε εικονοστοιχεία για τα μεγέθη γραμματοσειρών σας.
Πείτε ότι έχετε μια δομή μεγέθους κάτι σαν αυτό:
- Τίτλος 1 - 20px
- Τίτλος 2 - 18px
- Τίτλος 3 - 16px
- Κύριο κείμενο - 14px
- Υπο-κείμενο - 12px
- Υποσημειώσεις - 10px
Θα μπορούσατε να τα ορίσετε με αυτόν τον τρόπο χρησιμοποιώντας εικονοστοιχεία για τη μέτρηση, αλλά όποιος χρησιμοποιεί τα IE 6 και 7 δεν θα μπορούσε να αλλάξει σωστά την σελίδα σας. Έτσι θα πρέπει να μετατρέψετε τα μεγέθη σε ems και αυτό είναι απλώς θέμα ορισμένων μαθηματικών:
- Τίτλος 1 - 1.25em (16 x 1.25 = 20)
- Τίτλος 2 - 1.125em (16 × 1.125 = 18)
- Τίτλος 3 - 1em (1em = 16px)
- Κύριο κείμενο - 0.875em (16 x 0.875 = 14)
- Υπο-κείμενο - 0,75μ (16 x 0,75 = 12)
- Υποσημειώσεις - 0.625em (16 x 0.625 = 10)
Μην ξεχάσετε τη κληρονομιά!
Αλλά αυτό δεν είναι μόνο το ems. Το άλλο πράγμα που πρέπει να θυμάστε είναι ότι παίρνουν το μέγεθος του γονέα. Επομένως, εάν έχετε ενσωματωμένα στοιχεία με διαφορετικά μεγέθη γραμματοσειρών, θα μπορούσατε να καταλήξετε με μια γραμματοσειρά πολύ μικρότερη ή μεγαλύτερη από την αναμενόμενη.
Για παράδειγμα, μπορεί να έχετε ένα φύλλο στυλ όπως αυτό:
p {font-size: 0.875em; }}
.footnote {font-size: 0.625em; }}
Αυτό θα είχε ως αποτέλεσμα γραμματοσειρές 14px και 10px για το κύριο κείμενο και τις υποσημειώσεις αντίστοιχα. Αλλά αν βάλετε μια υποσημείωση μέσα σε μια παράγραφο, θα μπορούσατε να καταλήξετε με κείμενο που είναι 8,75px και όχι 10px. Δοκιμάστε τον εαυτό σας, βάλτε αυτό το παραπάνω CSS και την ακόλουθη HTML σε ένα έγγραφο:
Αυτή η γραμματοσειρά έχει ύψος 14px ή 0.875 ems.
Αυτή η παράγραφος έχει υποσημείωση σε αυτήν.
Παρόλο που πρόκειται για μια παράγραφο υποσημείωσης.
Το κείμενο της υποσημείωσης είναι δύσκολο να διαβάσει σε 10px, είναι σχεδόν δυσανάγνωστο στα 8,75px.
Έτσι, όταν χρησιμοποιείτε ems, θα πρέπει να γνωρίζετε πολύ καλά τα μεγέθη των γονικών αντικειμένων ή θα καταλήξετε με κάποια πραγματικά περίεργα μεγέθη στοιχεία στη σελίδα σας.