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

Προτεινόμενες ΚλASSES:

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

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

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

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

Η τιμή του font-size μπορεί να είναι απόλυτη ή σχετική

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

Αντιμετρικό μέγεθος:

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

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

Ρύθμιση μεγέθους γραμματοσειράς με pixel

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

Παράδειγμα

h1 {
  font-size: 40px;
}
h2 {
  font-size: 30px;
}
p {
  font-size: 14px;
}

Δοκιμάστε το Προσωπικά

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

Ρύθμιση μεγέθους γραμματοσειράς με em

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

Η W3C προτείνει τη χρήση του μέτρου em.

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

Μπορείτε να χρησιμοποιήσετε αυτήν την εξίσωση για να υπολογίσετε το μέγεθος από pixel σε em: pixels/16=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 */
}

Δοκιμάστε το Προσωπικά

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

不幸的是，旧版本的 Internet Explorer 仍然存在问题。放大文本时它比应该大的尺寸更大，缩小文本时会更小。

χρησιμοποιώντας συνδυασμό ποσοστιαίων και em;

Παράδειγμα

body {
  font-size: 100%;
}
h1 {
  font-size: 2.5em;
}
h2 {
  font-size: 1.875em;
}
p {
  font-size: 0.875em;
}

Δοκιμάστε το Προσωπικά

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

Απλοί Διαδραστικοί Ιστότοποι - Μεγέθη Γραμματοσειράς

Μπορείτε να χρησιμοποιήσετε vw Η ύλη του μεγέθους του κειμένου σημαίνει "πλάτος παραθύρου" ("viewport width").

Ετσι, το μέγεθος του κειμένου θα ακολουθεί το μέγεθος του παραθύρου του περιηγητή, παρακαλώ προσαρμόστε το μέγεθος του παραθύρου του περιηγητή για να δείτε πώς μεγαλώνει το μέγεθος του κειμένου:

Παράδειγμα

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

Δοκιμάστε το Προσωπικά

Το Περσπέκτιρο (Viewport) είναι το μέγεθος του παραθύρου του περιηγητή. 1vw = 1% του μεγέθους του παραθύρου του περιηγητή. Αν το πλάτος του παραθύρου είναι 50 εκατοστά, τότε 1vw είναι 0,5 εκατοστά.