16 of 313 menu

Ιδιότητα font-size-adjust

Η ιδιότητα font-size-adjust επιτρέπει τον έλεγχο του μεγέθους της γραμματοσειράς, με αμετάβλητο font-size (αύξηση ή μείωση).

Εφαρμογή: ας υποθέσουμε ότι στο font-family έχουν οριστεί δύο γραμματοσειρές χωρισμένες με κόμμα, για παράδειγμα, Georgia, "Times New Roman". Ας υποθέσουμε ότι ο υπολογιστής του χρήστη δεν έχει τη γραμματοσειρά Georgia - σε αυτήν την περίπτωση θα εφαρμοστεί η "Times New Roman". Ωστόσο, αντιμετωπίζουμε ένα πρόβλημα - με την ίδια τιμή font-size οι γραμματοσειρές θα εμφανίζονται διαφορετικά. Στο παράδειγμα παρακάτω, και στις δύο παραγράφους έχει οριστεί font-size σε 16px, αλλά διαφορετικό font-family. Δείτε πώς διαφέρουν τα μεγέθη:

<p style="font-size: 16px; font-family: Georgia;"> Lorem ipsum dolor sit amet. </p> <p style="font-size: 16px; font-family: 'Times New Roman';"> Lorem ipsum dolor sit amet. </p>

:

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

Αυτή η αναλογία ονομάζεται aspect της γραμματοσειράς και υπολογίζεται από τον τύπο: aspect = font-size / x-height.

Το πρόβλημα των μεγεθών λύνεται από την ιδιότητα font-size-adjust (που επιτρέπει την αλλαγή του aspect της γραμματοσειράς), η οποία θα κάνει τη δεύτερη γραμματοσειρά να εμφανίζεται στο ίδιο μέγεθος με την πρώτη.

Ας κάνουμε τη γραμματοσειρά Times New Roman να έχει το ίδιο μέγεθος, όπως και η Georgia. Γνωρίζουμε το aspect της Georgia - είναι 0.5 (δείτε τον πίνακα παρακάτω).

Ας ορίσουμε το font-size-adjust για το κείμενο με Times New Roman στην τιμή 0.5 και θα δούμε ότι το δεύτερο κείμενο έγινε του ίδιου μεγέθους με το πρώτο:

<p style="font-size: 16px; font-family: Georgia;"> Lorem ipsum dolor sit amet. </p> <p style="font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: 0.5;"> Lorem ipsum dolor sit amet. </p>

:

Σύνταξη

επιλογέας { font-size-adjust: αριθμός | none; }

Τιμές

Τιμή Περιγραφή
number Ο αριθμός ορίζει το aspect της γραμματοσειράς.
none Δεν υπάρχει ρύθμιση μεγέθους γραμματοσειράς.

Προεπιλεγμένη τιμή: none.

Πώς να προσδιορίσετε την τιμή aspect για μια γραμματοσειρά;

Δείτε ένα απόσπασμα από τις προδιαγραφές του W3C: Ο συντελεστής αναλογίας (aspect) για επιλεγμένες γραμματοσειρές μπορεί να υπολογιστεί συγκρίνοντας το ίδιο κείμενο, αλλά με διαφορετικό τιμή font-size-adjust. Εάν η τιμή της ιδιότητας έχει επιλεγεί σωστά, τότε με το ίδιο μέγεθος γραμματοσειράς το κείμενο θα παραμείνει αμετάβλητο για όλες τις γραμματοσειρές που χρησιμοποιούνται στη σελίδα.

Παραθέτω τις γνωστές μου τιμές aspect για ορισμένες γραμματοσειρές: Georgia - 0.5, Times New Roman - 0.46, Verdana - 0.58.

Παράδειγμα

Συγκρίνετε πώς εμφανίζεται το κείμενο με διαφορετική τιμή font-size-adjust και το ίδιο font-size και font-family:

<p style="font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: none;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <p style="font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: 0.5;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <p style="font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: 0.6;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>

:

Παράδειγμα . Εφαρμογή στην πραγματική ζωή

Ο παρακάτω κώδικας κάνει έτσι ώστε σε περίπτωση απουσίας στον υπολογιστή του χρήστη της γραμματοσειράς Georgia, η εφαρμοζόμενη γραμματοσειρά Times New Roman να έχει το ίδιο μέγεθος, όπως και η Georgia:

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elitorire aenean a dapibus magna, ac interdum nisl suspendisse egetile. </p> p { font-size: 16px; font-family: Georgia, "Times New Roman"; font-size-adjust: 0.5; }

:

Ελληνικά
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Χρησιμοποιούμε cookie για τη λειτουργία του ιστότοπου, την ανάλυση και την εξατομίκευση. Η επεξεργασία των δεδομένων γίνεται σύμφωνα με την Πολιτική Απορρήτου.
αποδοχή όλων ρύθμιση απόρριψη