Εκμάθηση μεγέθους γραμματοσειράς CSS - Πώς να αλλάξετε το μέγεθος κειμένου σε HTML

Χρησιμοποιήστε την font-sizeιδιότητα CSS για να προσδιορίσετε το μέγεθος του κειμένου σας.

.container { font-size: 33px; } 

Αυτή η ιδιότητα λαμβάνει διάφορους τύπους τιμών:

  • Λέξεις-κλειδιά (λέξεις-κλειδιά απόλυτου μεγέθους και σχετικού μεγέθους),
  • Μήκος (όπως pixel (px) και μονάδες em), και
  • Ποσοστά.
.container { font-size: xx-large; } 

Το ερώτημα είναι: ποιο είδος αξίας πρέπει να επιλέξετε και γιατί;

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

Τιμές λέξεων-κλειδιών

Υπάρχουν δύο τύποι τιμών λέξεων-κλειδιών που μπορείτε να χρησιμοποιήσετε με το μέγεθος της γραμματοσειράς: absolute-sizeκαι τις relative-sizeλέξεις-κλειδιά. Ας ξεκινήσουμε με απόλυτο.

Λέξεις-κλειδιά απόλυτου μεγέθους

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

.childElement { font-size: small; } 

Υπάρχουν περισσότερες επιλογές λέξεων-κλειδιών απόλυτου μεγέθους για να διαλέξετε:

  • xx-μικρό
  • x-μικρό
  • μικρό
  • Μεσαίο
  • μεγάλο
  • x-μεγάλο
  • xx-μεγάλο
  • xxx-μεγάλο

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

Λέξεις-κλειδιά σχετικού μεγέθους

Οι σχετικές λέξεις-κλειδιά είναι μια άλλη επιλογή λέξεων-κλειδιών που πρέπει να λάβετε υπόψη. Έχετε δύο να διαλέξετε: smallerκαι larger.

.parentElement { font-size: smaller; } 

Το μέγεθος γραμματοσειράς ενός στοιχείου με μια λέξη-κλειδί σχετικού μεγέθους είναι σχετικό - μεγαλύτερο ή μικρότερο - με το μέγεθος της γραμματοσειράς του γονέα του.

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

Σε αυτό το παράδειγμα, η λέξη-κλειδί σχετικού μεγέθους smallerεφαρμόζεται στο θυγατρικό στοιχείο και η τιμή απόλυτου μεγέθους largeεφαρμόζεται στο γονικό στοιχείο.

Τιμές μήκους

font-sizeδέχεται πολλές διαφορετικές τιμές μήκους. Θα διερευνήσουμε τρία από αυτά: pixel (px) και em και rem. Παρά την επιλογή σας, η τιμή μήκους που χρησιμοποιείτε πρέπει να είναι θετική.

.parentElement { font-size: 60px; } 

Pixel

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

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

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

ΗΜ

Ενώ μπορείτε να σκεφτείτε τα pixel ως σταθερά, σκεφτείτε τις τιμές em ως μεταβλητές.

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

Ωστόσο, ας υποθέσουμε ότι δεν έχετε ορίσει μέγεθος γραμματοσειράς για το γονικό στοιχείο. Ούτε έχετε θέσει ένα άλλο υψηλότερο στο DOM. Σε αυτήν την περίπτωση, η τιμή em υπολογίζεται χρησιμοποιώντας την προεπιλογή του προγράμματος περιήγησης (συχνά 16 εικονοστοιχεία).

Ας κάνουμε αυτήν την ιδέα συγκεκριμένη.

Ας υποθέσουμε ότι το γονικό στοιχείο έχει οριστεί σε 30px και το θυγατρικό στοιχείο έχει οριστεί σε 2em. Στη συνέχεια, το μέγεθος της γραμματοσειράς του παιδικού στοιχείου είναι 60px (2 x 30px = 60px). Μπορείτε να δείτε αυτό το σενάριο στον παρακάτω κώδικα.

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

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

REM

Εισαγάγετε τιμές rem, οι οποίες δημιουργήθηκαν για την αντιμετώπιση του προβλήματος σύνθεσης του ems.

Θυμηθείτε ότι οι τιμές em σχετίζονται με το γονικό στοιχείο. Αντίθετα, οι τιμές rem σχετίζονται με το μέγεθος της γραμματοσειράς του στοιχείου ρίζας (html).  

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

Αυτό το παράδειγμα χρησιμοποιεί την font-sizeιδιότητα με τιμή υπολοίπου.

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

Ποσοστά

Τα ποσοστά προσφέρουν έναν ακόμη τρόπο για να ορίσετε το μέγεθος της γραμματοσειράς σε σχέση με το μέγεθος της γραμματοσειράς του γονικού στοιχείου.

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

Εδώ είναι ένα παράδειγμα.

Όπως μπορείτε να δείτε, όσον αφορά το μέγεθος της γραμματοσειράς, έχετε πολλές επιλογές που ταιριάζουν στις ανάγκες σας.

Γράφω για την εκμάθηση του προγράμματος και τους καλύτερους τρόπους για να το κάνω στο amymhaddad.com. Έχωεπίσηςtweet για προγραμματισμό, μάθηση και παραγωγικότητα: @amymhaddad.