Χρήση ems για αλλαγή μεγέθους γραμματοσειράς κειμένου σε μια ιστοσελίδα

click fraud protection

Όταν δημιουργείτε μια ιστοσελίδα, οι περισσότεροι επαγγελματίες συνιστούν να μεγεθύνετε τις γραμματοσειρές (και στην πραγματικότητα, τα πάντα) με ένα σχετικό μέτρο όπως ems, exs, ποσοστά ή pixel. Αυτό συμβαίνει επειδή πραγματικά δεν γνωρίζετε όλους τους διαφορετικούς τρόπους με τους οποίους κάποιος μπορεί να δει το περιεχόμενό σας. Και αν χρησιμοποιείτε απόλυτο μέτρο (ίντσες, εκατοστά, χιλιοστά, σημεία ή πίκες) μπορεί να επηρεάσει την εμφάνιση ή την αναγνωσιμότητα της σελίδας σε διαφορετικές συσκευές. Και προτείνει το W3C ότι χρησιμοποιείτε ems για μεγέθη.

Αλλά πόσο μεγάλο είναι ένα em;

Σύμφωνα με την W3C ένα em:

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

Με άλλα λόγια, τα ems δεν έχουν απόλυτο μέγεθος. Παίρνουν τις τιμές μεγέθους τους με βάση το πού βρίσκονται. Για τους περισσότερους

instagram viewer
σχεδιαστές ιστοσελίδων, αυτό σημαίνει ότι βρίσκονται σε πρόγραμμα περιήγησης στο Web, οπότε μια γραμματοσειρά ύψους 1em είναι ακριβώς το ίδιο μέγεθος με το προεπιλεγμένο μέγεθος γραμματοσειράς για αυτό το πρόγραμμα περιήγησης.

Αλλά πόσο ψηλό είναι το προεπιλεγμένο μέγεθος; Δεν υπάρχει τρόπος να είμαστε 100% σίγουροι, καθώς οι πελάτες μπορούν να το αλλάξουν προεπιλεγμένο μέγεθος γραμματοσειράς στα προγράμματα περιήγησής τους, αλλά επειδή οι περισσότεροι άνθρωποι δεν μπορείτε να υποθέσετε ότι τα περισσότερα προγράμματα περιήγησης έχουν προεπιλεγμένο μέγεθος γραμματοσειράς 16 εικονοστοιχείων. Τις περισσότερες φορές 1em = 16 εικονοστοιχεία.

Σκεφτείτε σε Pixels, Χρησιμοποιήστε ems για το Μέτρο

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

  • Επικεφαλίδα 1 - 20 εικονοστοιχεία
  • Επικεφαλίδα 2 - 18 εικονοστοιχεία
  • Επικεφαλίδα 3 - 16 εικονοστοιχεία
  • Κύριο κείμενο - 14 εικονοστοιχεία
  • Υπο κείμενο - 12 εικονοστοιχεία
  • Υποσημειώσεις - 10 εικονοστοιχεία

Θα μπορούσατε να τα ορίσετε με αυτόν τον τρόπο χρησιμοποιώντας εικονοστοιχεία για τη μέτρηση, αλλά τότε οποιοσδήποτε χρησιμοποιεί 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,75em (16 x 0,75 = 12)
  • Υποσημειώσεις - 0,625em (16 x 0,625 = 10)

Μην ξεχάσετε την κληρονομικότητα!

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

Για παράδειγμα, μπορεί να έχετε ένα φύλλο στυλ ως εξής:

Αυτό θα είχε ως αποτέλεσμα γραμματοσειρές που είναι 14px και 10px για το κύριο κείμενο και τις υποσημειώσεις αντίστοιχα. Αλλά αν βάλετε μια υποσημείωση μέσα σε μια παράγραφο, θα μπορούσατε να καταλήξετε με κείμενο που είναι 8,75 εικονοστοιχεία αντί για 10 εικονοστοιχεία. Δοκιμάστε το μόνοι σας, βάλτε τα παραπάνω CSS και το ακόλουθο HTML σε ένα έγγραφο:

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

instagram story viewer