Μέγεθος γραμματοσειράς CSS

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Μέγεθος γραμματοσειράς

Η ιδιότητα font-size ορίζει το μέγεθος του κειμένου.

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

Να χρησιμοποιείτε πάντα τις κατάλληλες ετικέτες HTML, όπως <h1> - <h6> για επικεφαλίδες και <p> για παραγράφους.

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

Απόλυτο μέγεθος:

  • Ορίζει το κείμενο σε ένα καθορισμένο μέγεθος

  • Δεν επιτρέπει σε έναν χρήστη να αλλάξει το μέγεθος του κειμένου σε όλα τα προγράμματα περιήγησης (κακό για λόγους προσβασιμότητας)

  • Το απόλυτο μέγεθος είναι χρήσιμο όταν είναι γνωστό το φυσικό μέγεθος της εξόδου

Σχετικό μέγεθος:

  • Ορίζει το μέγεθος σε σχέση με τα γύρω στοιχεία

  • Επιτρέπει σε έναν χρήστη να αλλάξει το μέγεθος του κειμένου στα προγράμματα περιήγησης

Σημείωση: Εάν δεν καθορίσετε μέγεθος γραμματοσειράς, το προεπιλεγμένο μέγεθος για το κανονικό κείμενο, όπως οι παράγραφοι, είναι 16 px (16px=1em).

Ορισμός μεγέθους γραμματοσειράς με εικονοστοιχεία

Η ρύθμιση του μεγέθους κειμένου με εικονοστοιχεία σάς δίνει τον πλήρη έλεγχο του μεγέθους του κειμένου:

Παράδειγμα

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

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

Ορισμός μεγέθους γραμματοσειράς με Em

Για να επιτρέπεται στους χρήστες να αλλάζουν το μέγεθος του κειμένου (στο μενού του προγράμματος περιήγησης), πολλά Οι προγραμματιστές χρησιμοποιούν em αντί για pixel.

1em είναι ίσο με το τρέχον μέγεθος γραμματοσειράς. Το προεπιλεγμένο μέγεθος κειμένου στα προγράμματα περιήγησης είναι 16 εικονοστοιχεία. Έτσι, το προεπιλεγμένο μέγεθος του 1em είναι 16 px.

Το μέγεθος μπορεί να υπολογιστεί από pixel σε em χρησιμοποιώντας αυτόν τον τύπο: <i>pixels/16=<i>em

Παράδειγμα

h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}

p {
  font-size: 0.875em; /* 14px/16=0.875em */
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
 }

p {
  font-size: 0.875em; /* 14px/16=0.875em */
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in em allows all major browsers to resize the text.
Unfortunately, there is still a problem with older versions of IE. When resizing the text, it becomes larger/smaller than it should.</p>

</body>
</html>

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

Δυστυχώς, εξακολουθεί να υπάρχει πρόβλημα με παλαιότερες εκδόσεις του Internet Explorer. Το κείμενο γίνεται μεγαλύτερο από όσο θα έπρεπε όταν γίνεται μεγαλύτερο, και μικρότερο από όσο θα έπρεπε όταν γίνεται μικρότερο.

Χρησιμοποιήστε έναν συνδυασμό ποσοστού και Em

Η λύση που λειτουργεί σε όλα τα προγράμματα περιήγησης είναι να ορίσετε ένα προεπιλεγμένο μέγεθος γραμματοσειράς ποσοστό για το στοιχείο <body>:

Παράδειγμα

body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.875em;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.875em;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in percent and em displays the same size in all major browsers, and allows all browsers to resize the text!</p>

</body>
</html>

Ο κώδικας μας τώρα λειτουργεί τέλεια! Εμφανίζει το ίδιο μέγεθος κειμένου όλα τα προγράμματα περιήγησης και επιτρέπει σε όλα τα προγράμματα περιήγησης να μεγεθύνουν ή να αλλάξουν το μέγεθος του κειμένου!

Αποκριτικό μέγεθος γραμματοσειράς

Το μέγεθος του κειμένου μπορεί να οριστεί με μια μονάδα vw, που σημαίνει το "πλάτος της θύρας προβολής".

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

Hello World

Resize the browser window to see how the font size scales.

Παράδειγμα

<h1 style="font-size:10vw">Hello World</h1>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>

<h1 style="font-size:10vw;">Responsive Text</h1>

<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>

<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</p>

<p>Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.</p>

</body>
</html>

Viewport είναι το μέγεθος του παραθύρου του προγράμματος περιήγησης. 1vw=1% του πλάτους της θύρας προβολής. Εάν η θύρα προβολής έχει πλάτος 50 cm, το 1vw είναι 0,5 cm.