Μετατροπέας μήκους και απόστασης Μετατροπέας μάζας Μετατροπέας μετρήσεων όγκου χύμα προϊόντων και προϊόντων διατροφής Μετατροπέας περιοχής Μετατροπέας όγκου και μονάδων μέτρησης σε μαγειρικές συνταγές Μετατροπέας θερμοκρασίας Μετατροπέας πίεσης, μηχανικής καταπόνησης, συντελεστής Young's Μετατροπέας ενέργειας και εργασίας Μετατροπέας ισχύος Μετατροπέας δύναμης Μετατροπέας χρόνου Μετατροπέας γραμμικής ταχύτητας Επίπεδη γωνία Μετατροπέας θερμικής απόδοσης και απόδοσης καυσίμου Μετατροπέας αριθμών σε διάφορα συστήματα αριθμών Μετατροπέας μονάδων μέτρησης της ποσότητας πληροφοριών Τιμές νομισμάτων Μεγέθη γυναικείων ενδυμάτων και παπουτσιών Μεγέθη ανδρικών ενδυμάτων και παπουτσιών Μετατροπέας γωνιακής ταχύτητας και συχνότητας περιστροφής Μετατροπέας Acceler Μετατροπέας γωνιακής επιτάχυνσης Μετατροπέας πυκνότητας Μετατροπέας ειδικού όγκου Μετατροπέας ροπής αδράνειας Μετατροπέας ροπής δύναμης Μετατροπέας ροπής Μετατροπέας ειδικής θερμότητας καύσης (κατά μάζα) Μετατροπέας πυκνότητας ενέργειας και ειδικής θερμότητας καύσης (κατά όγκο) Μετατροπέας διαφοράς θερμοκρασίας Συντελεστής μετατροπέας θερμικής διαστολής Μετατροπέας θερμικής αντίστασης Μετατροπέας θερμικής αγωγιμότητας Μετατροπέας ειδικής θερμικής χωρητικότητας Μετατροπέας ισχύος έκθεσης ενέργειας και θερμικής ακτινοβολίας Μετατροπέας πυκνότητας ροής θερμότητας Μετατροπέας συντελεστή ροής θερμότητας Μετατροπέας ταχύτητας ροής όγκου Μετατροπέας ταχύτητας μάζας Μετατροπέας μοριακής ταχύτητας ροής Μετατροπέας μοριακής πυκνότητας ροής Μετατροπέας μοριακής συγκέντρωσης συγκέντρωσης μάζας σε μετατροπέα διαλύματος Δυναμικό (απόλυτο) Μετατροπέας ιξώδους Κινηματικός μετατροπέας ιξώδους Μετατροπέας επιφανειακής τάσης Μετατροπέας διαπερατότητας ατμών Μετατροπέας πυκνότητας ροής υδρατμών Μετατροπέας στάθμης ήχου Μετατροπέας ευαισθησίας μικροφώνου Μετατροπέας στάθμης πίεσης ήχου (SPL) Μετατροπέας επιπέδου πίεσης ήχου με επιλεγμένη πίεση αναφοράς Μετατροπέας φωτεινότητας φωτεινότητας συχνότητας και φωτεινότητας Μετατροπέας μήκους κύματος Ισχύς διόπτρας και εστιακό μήκος Διόπτρας Ισχύς και μεγέθυνση φακού (×) Ηλεκτρικό φορτίο μετατροπέα Μετατροπέας γραμμικής πυκνότητας φόρτισης Μετατροπέας πυκνότητας επιφανειακής φόρτισης Μετατροπέας πυκνότητας όγκου φόρτισης Μετατροπέας ηλεκτρικού ρεύματος Μετατροπέας γραμμικής πυκνότητας ρεύματος Μετατροπέας πυκνότητας επιφανειακού ρεύματος Μετατροπέας πυκνότητας επιφανειακού ρεύματος Μετατροπέας δυναμικού ηλεκτρικού πεδίου Electrovolagesta Μετατροπέας ηλεκτρικής αντίστασης Μετατροπέας ηλεκτρικής αντίστασης Μετατροπέας ηλεκτρικής αντίστασης Μετατροπέας ηλεκτρικής αγωγιμότητας Μετατροπέας ηλεκτρικής αγωγιμότητας Μετατροπέας επαγωγής ηλεκτρικής χωρητικότητας Αμερικανικός μετατροπέας μετρητή καλωδίων Επίπεδα σε dBm (dBm ή dBm), dBV (dBV), watt, κ.λπ. μονάδες Μετατροπέας μαγνητοκινητικής δύναμης Μετατροπέας τάσης μαγνητικό πεδίοΜετατροπέας μαγνητικής ροής Μετατροπέας μαγνητικής επαγωγής Ακτινοβολία. Μετατροπέας ρυθμού δόσης απορροφούμενης από ιονίζουσα ακτινοβολία Ραδιενέργεια. Μετατροπέας ραδιενεργού αποσύνθεσης Ακτινοβολία. Μετατροπέας δόσης έκθεσης Ακτινοβολία. Μετατροπέας απορροφημένης δόσης Μετατροπέας δεκαδικού προθέματος Μεταφορά δεδομένων Μετατροπέας τυπογραφίας και μονάδας επεξεργασίας εικόνας Μετατροπέας μονάδας όγκου ξυλείας Υπολογισμός μοριακής μάζας Περιοδικός πίνακας χημικών στοιχείων του D. I. Mendeleev

1 pixel (X) = 0,752812499999996 πόντοι (τυπογραφικά)

Αρχική τιμή

Τιμή μετατροπής

twip meter εκατοστό σύμβολο χιλιοστόμετρο (X) σύμβολο (Y) pixel (X) pixel (Y) ίντσα συγκόλλησης (υπολογιστής) συγκόλληση (τυπογραφικό) σημείο NIS/PostScript σημείο (υπολογιστής) σημείο (τυπογραφικό) em παύλα cicero em σημείο παύλα Dido

Αμερικανικός μετρητής καλωδίων

Μάθετε περισσότερα σχετικά με τις μονάδες που χρησιμοποιούνται στην τυπογραφία και την ψηφιακή απεικόνιση

Γενικές πληροφορίες

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

Οι γραμματοσειρές χωρίζονται σε διαφορετικούς τύπους, όπως γραμματοσειρές serif και sans serif. Τα σερίφ είναι διακοσμητικό στοιχείο μιας γραμματοσειράς, αλλά σε ορισμένες περιπτώσεις κάνουν το κείμενο πιο ευανάγνωστο, αν και μερικές φορές συμβαίνει το αντίθετο. Το πρώτο γράμμα (μπλε) στην εικόνα είναι σε γραμματοσειρά Bodoni serif. Ένα από τα τέσσερα σερίφ σκιαγραφείται με κόκκινο χρώμα. Το δεύτερο γράμμα (κίτρινο) είναι σε γραμματοσειρά Futura sans serif.

Υπάρχουν πολλές ταξινομήσεις γραμματοσειρών, για παράδειγμα, ανάλογα με τον χρόνο δημιουργίας τους ή το δημοφιλές στυλ σε μια συγκεκριμένη χρονική στιγμή. Ναι, υπάρχουν γραμματοσειρές παλιό στυλ- μια ομάδα που περιλαμβάνει τις παλαιότερες γραμματοσειρές. νεότερες γραμματοσειρές μεταβατικό στυλ; σύγχρονες γραμματοσειρές, που δημιουργήθηκε μετά τις μεταβατικές γραμματοσειρές και πριν από τη δεκαετία του 1820. και τελικά γραμματοσειρές νέου στυλή εκσυγχρονισμένες παλιές γραμματοσειρές, δηλαδή γραμματοσειρές φτιαγμένες σύμφωνα με το παλιό μοντέλο σε μεταγενέστερο χρόνο. Αυτή η ταξινόμηση χρησιμοποιείται κυρίως για γραμματοσειρές serif. Υπάρχουν άλλες ταξινομήσεις με βάση εμφάνισηγραμματοσειρές, όπως το πάχος των γραμμών, η αντίθεση μεταξύ λεπτών και παχιών γραμμών και το σχήμα των σερίφ. Ο εγχώριος Τύπος έχει τις δικές του ταξινομήσεις. Για παράδειγμα, η ταξινόμηση σύμφωνα με το GOST ομαδοποιεί τις γραμματοσειρές με την παρουσία και την απουσία σερίφ, πάχυνση σε σερίφ, ομαλή μετάβαση από την κύρια γραμμή στο σερίφ, στρογγυλοποίηση του σερίφ και ούτω καθεξής. Στις ταξινομήσεις των ρωσικών, καθώς και άλλων κυριλλικών γραμματοσειρών, υπάρχει συχνά μια κατηγορία για παλιές εκκλησιαστικές γραμματοσειρές.

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

Στη διάταξη, πρέπει να γνωρίζετε όχι μόνο το μέγεθος του κειμένου, αλλά και το ύψος και το πλάτος των ψηφιακών εικόνων για να τις χωρέσετε στη σελίδα. Το μέγεθος μπορεί να εκφραστεί σε εκατοστά ή ίντσες, αλλά υπάρχει και μια μονάδα ειδικά σχεδιασμένη για τη μέτρηση του μεγέθους των εικόνων - pixel. Ένα εικονοστοιχείο είναι ένα στοιχείο μιας εικόνας με τη μορφή ενός σημείου (ή τετραγώνου) από το οποίο αποτελείται.

Ορισμός μονάδων

Το μέγεθος των γραμμάτων στην τυπογραφία υποδεικνύεται με τη λέξη "μέγεθος". Υπάρχουν πολλά συστήματα για τη μέτρηση του μεγέθους του σημείου, αλλά τα περισσότερα βασίζονται στη μονάδα "συγκόλληση"στα αμερικανικά και αγγλικά συστήματα μέτρησης (αγγλικά pica), ή «cicero» στο ευρωπαϊκό σύστημα μέτρησης. Το όνομα "κόλληση" μερικές φορές γράφεται ως "ακίδα". Υπάρχουν διάφοροι τύποι συγκόλλησης, οι οποίοι διαφέρουν ελαφρώς σε μέγεθος, επομένως όταν χρησιμοποιείτε συγκόλληση, αξίζει να θυμάστε ποια συγκόλληση εννοείτε. Αρχικά, το κικέρωνα χρησιμοποιήθηκε στην οικιακή εκτύπωση, αλλά τώρα η συγκόλληση είναι επίσης κοινή. Η συγκόλληση του Κικέρωνα και του υπολογιστή είναι παρόμοια σε μέγεθος, αλλά όχι ίσα. Μερικές φορές το cicero ή η συγκόλληση χρησιμοποιείται απευθείας για μέτρηση, για παράδειγμα για τον προσδιορισμό του μεγέθους των περιθωρίων ή των στηλών. Συχνότερα, ειδικά για τη μέτρηση κειμένου, χρησιμοποιούνται μονάδες που προέρχονται από συγκόλληση, όπως σημεία εκτύπωσης. Το μέγεθος συγκόλλησης καθορίζεται διαφορετικά σε διαφορετικά συστήματα, όπως περιγράφεται παρακάτω.

Τα γράμματα μετρώνται όπως φαίνεται στην εικόνα:

Άλλες μονάδες

Αν και η συγκόλληση υπολογιστών αντικαθιστά σταδιακά άλλες μονάδες, και ίσως αντικαθιστά το πιο οικείο ciceros, μαζί με αυτό χρησιμοποιούνται και άλλες μονάδες. Μία από αυτές τις μονάδες είναι Αμερικανική συγκόλλησηΕίναι ίσο με 0,166 ίντσες ή 2,9 χιλιοστά. Υπάρχει επίσης συγκόλληση εκτύπωσης. Είναι ίσο με το αμερικανικό.

Μερικά εγχώρια τυπογραφεία και στη βιβλιογραφία για την εκτύπωση εξακολουθούν να χρησιμοποιούν τυπογραφική σειρά 12 στιγμές- μια μονάδα που χρησιμοποιήθηκε ευρέως στην Ευρώπη (με εξαίρεση την Αγγλία) πριν από την εμφάνιση της συγκόλλησης υπολογιστών. Ένας κικέρωνας ισούται με το 1/6 της γαλλικής ίντσας. Η γαλλική ίντσα είναι ελαφρώς διαφορετική από τη σύγχρονη ίντσα. Στις σύγχρονες μονάδες, ένας κικέρωνας ισούται με 4,512 χιλιοστά ή 0,177 ίντσες. Αυτή η τιμή είναι σχεδόν ίση με τη συγκόλληση υπολογιστή. Ένα cicero είναι 1,06 κολλήσεις υπολογιστή.

Στρογγυλή ενσωμάτωση (em) και ημικυκλική ενσωμάτωση (en)

Οι μονάδες που περιγράφονται παραπάνω καθορίζουν το ύψος των γραμμάτων, αλλά υπάρχουν και μονάδες που υποδεικνύουν το πλάτος των γραμμάτων και των συμβόλων. Η στρογγυλή και η ημικυκλική απόσταση είναι ακριβώς τέτοιες μονάδες. Το πρώτο είναι επίσης γνωστό ως em, ή em, από την αγγλική λέξη για το γράμμα M. Το πλάτος του ήταν ιστορικά ίσο με αυτό του αγγλικού γράμματος. Παρομοίως, ένα ημικυκλικό εμπάτ ίσο με μισό στρογγυλό είναι γνωστό ως en. Επί του παρόντος, αυτές οι τιμές δεν καθορίζονται χρησιμοποιώντας το γράμμα M, καθώς αυτό το γράμμα μπορεί να έχει διαφορετικά μεγέθη σε διαφορετικές γραμματοσειρές, ακόμα κι αν το μέγεθος είναι το ίδιο.

Στα ρωσικά, χρησιμοποιούνται οι παύλες en και em παύλα. Για να υποδείξετε εύρη και διαστήματα (για παράδειγμα, στη φράση: «πάρτε 3-4 κουταλιές της σούπας ζάχαρη»), χρησιμοποιείται ένα παύλα en, που ονομάζεται επίσης και παύλα. Η παύλα em χρησιμοποιείται στα ρωσικά σε όλες τις άλλες περιπτώσεις (για παράδειγμα, στη φράση: "το καλοκαίρι ήταν σύντομο και ο χειμώνας ήταν μακρύς"). Λέγεται και em παύλα.

Προβλήματα με σύγχρονα συστήματα μονάδων

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

Επιπλέον, τα γράμματα που γίνονται σε δύο διαφορετικές γραμματοσειρές μπορεί να είναι πολύ διαφορετικά σε μέγεθος, ακόμα κι αν έχουν το ίδιο μέγεθος στα τυπογραφικά σημεία. Αυτό συμβαίνει επειδή το ύψος των γραμμάτων μετριέται ως το ύψος του πληκτρολογίου, το οποίο δεν σχετίζεται άμεσα με το ύψος του χαρακτήρα. Αυτό δυσκολεύει τους σχεδιαστές, ειδικά αν εργάζονται με πολλές γραμματοσειρές στο ίδιο έγγραφο. Η εικόνα δείχνει ένα παράδειγμα αυτού του προβλήματος. Το μέγεθος και των τριών γραμματοσειρών στα τυπογραφικά σημεία είναι το ίδιο, αλλά το ύψος της πινακίδας είναι διαφορετικό παντού. Για να λύσουν αυτό το πρόβλημα, ορισμένοι σχεδιαστές προτείνουν να μετρηθεί το σημείο ως το ύψος του χαρακτήρα.

Μπορείτε να καθορίσετε μήκος σε CSS σε διαφορετικές μονάδες. Μερικά από αυτά προέρχονται από την τυπογραφική παράδοση, όπως το point (pt) και το pica (pc), άλλα, π.χ. εκατοστό (cm) και ίντσα (in) μας είναι γνωστά στην καθημερινή χρήση. Υπάρχει επίσης μια "μαγική" μονάδα που επινοήθηκε ειδικά για CSS: px. Σημαίνει αυτό ότι διαφορετικές ιδιότητες απαιτούν διαφορετικές μονάδες;

Όχι, οι μονάδες μέτρησης δεν σχετίζονται με ιδιότητες, αλλά σχετίζονται άμεσα με τα μέσα προβολής: οθόνη ή χαρτί.

Οποιεσδήποτε μονάδες μέτρησης μπορούν να χρησιμοποιηθούν οπουδήποτε. Μια ιδιότητα με τιμή σε εικονοστοιχεία (περιθώριο: 5 px) δέχεται επίσης τιμές σε ίντσες ή εκατοστά (περιθώριο: 1,2 ίντσες, περιθώριο: 0,5 cm) και αντίστροφα.

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

Η σχέση μεταξύ απόλυτων μονάδων είναι: 1in = 2,54cm = 25,4mm = 72pt = 6pc

Εάν έχετε πρόχειρο χάρακα, μπορείτε να ελέγξετε την ακρίβεια της συσκευής σας. Εδώ είναι ένα ορθογώνιο ύψους 1 ίντσας (2,54 cm):
72π
↓

Οι λεγόμενες απόλυτες μονάδες (cm, mm, in, pt και pc) στο CSS σημαίνουν το ίδιο πράγμα όπως παντού αλλού, αλλά μόνο εάν η συσκευή εξόδου έχει αρκετά υψηλή ανάλυση. Σε έναν εκτυπωτή λέιζερ, το 1 cm πρέπει να είναι ακριβώς ίσο με 1 εκατοστό. Αλλά σε συσκευές χαμηλής ανάλυσης, όπως οθόνες υπολογιστών, το CSS δεν απαιτεί κάτι τέτοιο. Πράγματι, διαφορετικές συσκευέςκαι διαφορετικές υλοποιήσεις CSS τείνουν να τις αποδίδουν διαφορετικά. Είναι καλύτερα να αφήσετε αυτές τις μονάδες για συσκευές υψηλής ανάλυσης, ιδιαίτερα για εκτύπωση. Σε οθόνες υπολογιστών και κινητές συσκευέςΑ, μπορεί να μην βγει όπως αναμενόταν.

Στο παρελθόν, το CSS απαιτούσε να εμφανίζονται σωστά οι απόλυτες μονάδες ακόμη και σε οθόνες υπολογιστών. Επειδή όμως υπήρχαν περισσότερες λανθασμένες υλοποιήσεις παρά σωστές και δεν αναμένονταν βελτιώσεις, η CSS εγκατέλειψε αυτήν την απαίτηση το 2011. Επί του παρόντος, οι απόλυτες μονάδες απαιτούνται μόνο για να λειτουργούν σωστά όταν εκτυπώνονται και σε συσκευές υψηλής ανάλυσης.

Το CSS δεν προσδιορίζει τι ακριβώς εννοείται με τον όρο "υψηλή ανάλυση". Αλλά επειδή οι φθηνοί εκτυπωτές σήμερα έχουν τουλάχιστον 300 dpi, και καλές οθόνεςπερίπου 200 dpi, το όριο πιθανότατα βρίσκεται κάπου μεταξύ αυτών των τιμών.

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

Οι μονάδες em και ex εξαρτώνται από το μέγεθος της γραμματοσειράς και μπορεί να είναι διαφορετικές για κάθε στοιχείο του εγγράφου. Η μονάδα em είναι απλώς το μέγεθος της γραμματοσειράς. Σε ένα στοιχείο στο οποίο δίνεται γραμματοσειρά 2 in, 1em σημαίνει αυτά τα 2in. Ο καθορισμός διαστάσεων (π.χ. για padding) στο em σημαίνει ότι δίνονται σε σχέση με τη γραμματοσειρά και είτε η γραμματοσειρά του χρήστη είναι μεγάλη (π.χ. σε μεγάλη οθόνη) είτε μικρή (π.χ. σε φορητή συσκευή), αυτές οι διαστάσεις θα παραμείνουν ανάλογες . Δηλώσεις όπως η εσοχή κειμένου: 1,5em και το περιθώριο: 1em στο CSS είναι εξαιρετικά δημοφιλείς.

Η μονάδα ex χρησιμοποιείται σπάνια. Εκφράζει τις διαστάσεις, οι οποίες πρέπει να μετρηθούν από το ύψος x της γραμματοσειράς. Χ-ύψος είναι, χοντρικά, το ύψος των πεζών γραμμάτων όπως ένα, ντο, Μ, ή ο. Οι γραμματοσειρές με το ίδιο μέγεθος (και, κατά συνέπεια, το ίδιο em) μπορεί να έχουν τεράστια διαφορά στα μεγέθη των πεζών γραμμάτων, και αν είναι σημαντικό κάποια εικόνα, για παράδειγμα, να αντιστοιχεί στο x-height, η μονάδα ex βρίσκεται στη διάθεσή σας υπηρεσία.

Η μονάδα px στο CSS είναι μαγική. Δεν σχετίζεται με την τρέχουσα γραμματοσειρά, αλλά συνήθως δεν σχετίζεται με φυσικά εκατοστά ή ίντσες. Μια μονάδα px ορίζεται ως κάτι μικρό αλλά ορατό, δηλ. Μια οριζόντια γραμμή πάχους 1 εικονοστοιχείου θα μπορούσε να αποδοθεί με αιχμηρές άκρες (χωρίς anti-aliasing). Αυτό που θεωρείται καθαρό, μικρό και ορατό εξαρτάται από τη συσκευή και τον τρόπο που τη χρησιμοποιείτε: αν την κρατάτε ακριβώς μπροστά στα μάτια σας, πώς κινητό τηλέφωνο, στο μήκος του βραχίονα, σαν οθόνη, ή κάπου ενδιάμεσα, όπως ηλεκτρονικό βιβλίο? Επομένως, το px εξ ορισμού δεν είναι ένα σταθερό μήκος, αλλά κάτι που εξαρτάται από τον τύπο της συσκευής και την κανονική χρήση της.

Για να καταλάβετε γιατί η μονάδα px είναι έτσι όπως είναι, φανταστείτε μια οθόνη CRT από τη δεκαετία του 1990: η μικρότερη κουκκίδα που μπορούσε να εμφανίσει ήταν περίπου 1/100 της ίντσας (0,25 mm) ή ελαφρώς μεγαλύτερη. Η μονάδα px παίρνει το όνομά της από αυτά τα εικονοστοιχεία οθόνης.

Οι τρέχουσες συσκευές μπορούν, καταρχήν, να εμφανίζουν μικρότερες, καθαρές κουκκίδες (αν και μπορεί να είναι δύσκολο να τις δούμε χωρίς μεγεθυντικό φακό). Αλλά τα έγγραφα του περασμένου αιώνα που χρησιμοποιούσαν px στο CSS μοιάζουν ίδια ανεξάρτητα από τη συσκευή. Ειδικά οι εκτυπωτές μπορούν να εμφανίζουν σαφώς γραμμές πολύ πιο λεπτές από 1 εικονοστοιχείο, αλλά ακόμη και σε εκτυπωτές μια γραμμή 1 εικονοστοιχείου φαίνεται σχεδόν ίδια με μια οθόνη. Οι συσκευές αλλάζουν, αλλά η μονάδα px φαίνεται πάντα η ίδια.

Στην πραγματικότητα, το CSS απαιτεί το 1px να είναι ακριβώς ίσο με το 1/96 της ίντσας σε οποιαδήποτε έξοδο εκτύπωσης. Το CSS υποθέτει ότι οι εκτυπωτές, σε αντίθεση με τις οθόνες, δεν χρειάζονται διαφορετικά μεγέθη px για να εμφανίζουν ευκρινείς γραμμές. Επομένως, όταν εκτυπώνεται, το px όχι μόνο φαίνεται το ίδιο ανεξάρτητα από τη συσκευή, αλλά μετριέται επίσης με την ίδια τιμή (ακριβώς όπως οι μονάδες cm, pt, mm, in και pc, όπως εξηγείται).

Το CSS καθορίζει επίσης ότι οι εικόνες bitmap (π.χ. φωτογραφίες) αποδίδονται σε κλίμακα 1 pixel εικόνας επί 1 px από προεπιλογή. Μια φωτογραφία με ανάλυση 600 επί 400 θα έχει πλάτος 600 εικονοστοιχεία και ύψος 400 εικονοστοιχεία. Έτσι, τα pixel της φωτογραφίας δεν συνδέονται με τα pixel της συσκευής εξόδου (που μπορεί να είναι πολύ μικρά), αλλά με μονάδες px. Αυτό σας επιτρέπει να ευθυγραμμίσετε με ακρίβεια τις εικόνες με άλλα στοιχεία εγγράφου, αρκεί να χρησιμοποιείτε μονάδες px στα στυλ σας αντί για pt , cm , κ.λπ.

Μια από τις πιο μπερδεμένες πτυχές CSSείναι η εφαρμογή μέγεθος γραμματοσειράςχαρακτηριστικό για κλιμάκωση κειμένου. Χρησιμοποιώντας το CSS, μπορείτε να αλλάξετε το μέγεθος του κειμένου στο πρόγραμμα περιήγησης χρησιμοποιώντας τέσσερις διαφορετικές μονάδες μέτρησης. Ποια από αυτές τις τέσσερις μονάδες είναι η καλύτερη για τον Ιστό; Αυτό είναι ένα ερώτημα που έχει προκαλέσει ποικίλες συζητήσεις και επικρίσεις. Η εύρεση οριστικής απάντησης είναι δύσκολη γιατί η ίδια η ερώτηση είναι πολύπλοκη.

Γνωρίστε τις μονάδες

1. "Ems" (em): Το "em" είναι μια κλιμακούμενη μονάδα που χρησιμοποιείται σε έγγραφα web. Το "em" είναι ίσο με το τρέχον μέγεθος γραμματοσειράς, για παράδειγμα, εάν το μέγεθος γραμματοσειράς στο έγγραφο είναι 12pt, το 1em είναι ίσο με 12pt. Το "em" είναι κλιμακούμενο από τη φύση του, επομένως 2em θα ισούται με 24pt, 0,5em θα ισούται με 6pt, κ.λπ. Η χρήση του "em" γίνεται ολοένα και πιο δημοφιλής σε έγγραφα ιστού λόγω της επεκτασιμότητας και της ικανότητάς του να είναι χρήσιμη σε κινητές συσκευές.
2. Pixel (px): Τα "px" είναι μονάδες σταθερού μεγέθους που χρησιμοποιούνται σε οθόνες (όπως για ανάγνωση σε οθόνη υπολογιστή). Ένα pixel ισούται με μια κουκκίδα στην οθόνη του υπολογιστή σας (το μικρότερο στοιχείο της ανάλυσης της οθόνης σας). Πολλοί σχεδιαστές ιστοσελίδων χρησιμοποιούν px σε έγγραφα Ιστού για να επιτύχουν μια τέλεια αναπαράσταση pixel του ιστότοπού τους όταν εμφανίζονται σε ένα πρόγραμμα περιήγησης. Ένα από τα προβλήματα με τη χρήση του px είναι ότι αυτές οι μονάδες δεν επιτρέπουν την κλιμάκωση για αναγνώστες με προβλήματα όρασης ή κινητές συσκευές.
3. Σημεία (pt): "pt", χρησιμοποιείται παραδοσιακά σε έντυπα μέσα (οτιδήποτε χρειάζεται να τυπωθεί σε χαρτί, κ.λπ.). Ένα "pt" ισούται με 1/72 της ίντσας. Το "pt", όπως το "px", έχει σταθερό μέγεθος μονάδας και δεν μπορεί να κλιμακωθεί.
4. Ποσοστά (%): Οι ποσοστιαίες μονάδες είναι παρόμοιες με το "em" εκτός από μερικές βασικές διαφορές. Πρώτον, το τρέχον μέγεθος γραμματοσειράς είναι 100% (δηλαδή 12pt = 100%). Χρησιμοποιώντας το "%", το κείμενό σας γίνεται πλήρως επεκτάσιμο για κινητές συσκευές και φιλικότητα προς τον χρήστη (προσβασιμότητα).

Ποια είναι λοιπόν η διαφορά;

Θα είναι εύκολο να κατανοήσετε τη διαφορά μεταξύ των μονάδων μεγέθους γραμματοσειράς μόλις τις δείτε σε δράση. Συνήθως, 1em = 12pt = 16px = 100%. Χρησιμοποιώντας αυτά τα μεγέθη γραμματοσειράς, ας δούμε τι συμβαίνει όταν αυξήσετε το μέγεθος της βασικής γραμματοσειράς (χρησιμοποιώντας τον επιλογέα σώματος CSS) από 100% σε 120%.

Αλλαγή μεγέθους γραμματοσειράς από 100% σε 120%.

Όπως μπορείτε να δείτε, τα "em" και "%" αύξησαν το μέγεθος της γραμματοσειράς, ενώ τα "px" και "pt" όχι. Ο ορισμός ενός απόλυτου μεγέθους για το κείμενό σας μπορεί να είναι εύκολος, αλλά είναι πολύ καλύτερο για τους επισκέπτες σας να χρησιμοποιούν επεκτάσιμο κείμενο που μπορεί να εμφανιστεί σε οποιαδήποτε συσκευή ή μηχάνημα. Για το λόγο αυτό, οι μονάδες "em" και "%" είναι προτιμότερο να χρησιμοποιηθούν για κείμενο εγγράφου ιστού.

"em" εναντίον "%"

Ανακαλύψαμε ότι οι μονάδες "px" και "pt" δεν είναι οι καλύτερες για έγγραφα web, γεγονός που μας αναγκάζει να χρησιμοποιούμε "em" και "%". Θεωρητικά, οι μονάδες "em" και "%" είναι πανομοιότυπες, αλλά στην πράξη έχουν μικρές διαφορές που είναι σημαντικό να ληφθούν υπόψη.

Στο παραπάνω παράδειγμα, χρησιμοποιήσαμε ποσοστά (στην ετικέτα σώματος) ως βασική μονάδα μεγέθους γραμματοσειράς. Εάν αλλάξετε τη βασική μονάδα μεγέθους γραμματοσειράς από "%" σε "em" (δηλαδή σώμα (μέγεθος γραμματοσειράς: 1em;)), πρέπειμην παρατηρήσετε τη διαφορά. Ας δούμε τι συμβαίνει όταν το "1em" είναι η βασική μας μονάδα και όταν ο πελάτης αλλάζει το "Μέγεθος γραμματοσειράς" στις ρυθμίσεις του προγράμματος περιήγησής του (πολλά προγράμματα περιήγησης, όπως ο Internet Explorer, έχουν αυτήν την επιλογή).

Το μέγεθος γραμματοσειράς όταν ο πελάτης αλλάζει το μέγεθος κειμένου στο πρόγραμμα περιήγησης.

Όταν το μέγεθος του κειμένου έχει οριστεί σε "μεσαίο" στο πρόγραμμα περιήγησης πελάτη, δεν υπάρχει αξιοσημείωτη διαφορά μεταξύ "em" και "%". Ωστόσο, εάν αλλάξει η παράμετρος, η διαφορά γίνεται πολύ μεγάλη. Όταν οριστεί σε "Smallest", το "em" είναι πολύ μικρότερο από το "%" και όταν οριστεί σε "Largest", αντίθετα, το "em" εμφανίζεται πολύ μεγαλύτερο από το "%". Και ενώ πολλοί υποστηρίζουν ότι οι μονάδες σε κλίμακα "em" κλιμακώνονται όπως προβλέπεται, στην πράξη το κείμενο σε "em" κλιμακώνεται υπερβολικά δραματικά, με αποτέλεσμα το μικρότερο κείμενο να γίνεται δυσανάγνωστο σε ορισμένες μηχανές.

Ετυμηγορία

Θεωρητικά, οι μονάδες "em" είναι το νέο και επερχόμενο πρότυπο μεγέθους γραμματοσειράς στον ιστό, αλλά στην πράξη, οι μονάδες "%" επιτρέπουν την εμφάνιση κειμένου με μεγαλύτερη συνέπεια και ευκολία για τους χρήστες. Κατά την αλλαγή των παραμέτρων πελάτη, το κείμενο στο "%" άλλαξε σε λογικές αναλογίες, γεγονός που επιτρέπει στους σχεδιαστές να διατηρούν την αναγνωσιμότητα, την προσβασιμότητα και το σχεδιασμό.

Νικητής: τοις εκατό (%).

Η χρήση του χαρακτηριστικού μεγέθους γραμματοσειράς για την κλίμακα κειμένου είναι μια από τις πιο δύσκολες πτυχές του στυλ στο CSS. Το CSS προσφέρει τέσσερις μονάδες για τη μέτρηση του μεγέθους του κειμένου που εμφανίζεται σε ένα πρόγραμμα περιήγησης Ιστού. Ποια από αυτές τις τέσσερις μονάδες είναι πιο κατάλληλη για έγγραφα web; Το θέμα αυτό έχει προκαλέσει πολλές συζητήσεις και αντιπαραθέσεις. Είναι δύσκολο να δοθεί μια οριστική απάντηση σε μια τέτοια ερώτηση.

Γνωριμία με τις μονάδες

Εμ ( em): em είναι μια κλιμακούμενη μονάδα που χρησιμοποιείται για έγγραφα web. Ένα em ισούται με το τρέχον μέγεθος γραμματοσειράς. Για παράδειγμα, αν το μέγεθος γραμματοσειράς του εγγράφου είναι 12 pt, τότε 1em ισούται με 12 pt. Εφόσον το em είναι κλιμακωμένο, 2em ισούται με 24pt, 0,5em ισούται με 6pt, κ.λπ. Λόγω της επεκτασιμότητας και της υψηλής συμβατότητάς του με κινητές συσκευές, το em χρησιμοποιείται όλο και περισσότερο σε έγγραφα web.

εικονοστοιχεία ( px): Τα εικονοστοιχεία είναι μονάδες σταθερού μεγέθους που χρησιμοποιούνται για οτιδήποτε διαβάζεται σε μια οθόνη υπολογιστή. Ένα pixel ισούται με μια κουκκίδα στην οθόνη ενός υπολογιστή (αυτή είναι η μικρότερη διαίρεση της ανάλυσης της οθόνης σας). Πολλοί σχεδιαστές ιστοσελίδων χρησιμοποιούν pixel σε έγγραφα Ιστού για να διασφαλίσουν ότι ο ιστότοπος εμφανίζεται τέλειος με pixel όταν εμφανίζεται σε ένα πρόγραμμα περιήγησης. Το μόνο πρόβλημα είναι ότι τα εικονοστοιχεία δεν μπορούν να μεγεθυνθούν για να φιλοξενήσουν συσκευές ανάγνωσης χαμηλής όρασης ή να μειωθούν για ευκολότερη ανάγνωση σε κινητές συσκευές.

Πόντοι ( pt): Οι τελείες χρησιμοποιούνται παραδοσιακά σε έντυπα μέσα (δηλαδή για οτιδήποτε εκτυπώνεται σε χαρτί). Ένα σημείο ισούται με 1/72 της ίντσας. Οι κουκκίδες μοιάζουν πολύ με τα εικονοστοιχεία, καθώς έχουν σταθερό μέγεθος και δεν μπορούν να μεγεθυνθούν/μικρύνουν.

1. Ποσοστό ( % ): Το ποσοστό είναι πολύ παρόμοιο με το em , εκτός από μερικές βασικές διαφορές. Πρώτον, το τρέχον μέγεθος γραμματοσειράς είναι 100% (δηλαδή 12pt = 100%). Η χρήση της μονάδας Ποσοστό σάς επιτρέπει να μεγεθύνετε/μειώσετε το κείμενό σας για ευκολότερη ανάγνωση.

Ποιά είναι η διαφορά?

Η διαφορά μεταξύ αυτών των μονάδων είναι εύκολα κατανοητή με συγκεκριμένα παραδείγματα. Δείτε πώς σχετίζονται μεταξύ τους: 1em = 12pt = 16px = 100%. Ας δούμε τι συμβαίνει όταν αυξήσουμε το μέγεθος της κύριας γραμματοσειράς (χρησιμοποιώντας τον επιλογέα CSS σώματος) από 100% σε 120%.

Όπως μπορείτε να δείτε, το Ems και το Ποσοστό αυξάνονται καθώς αυξάνεται το μέγεθος της βασικής γραμματοσειράς, αλλά τα Pixel και τα Dots όχι. Είναι εύκολο να χρησιμοποιήσετε ένα απόλυτο μέγεθος για το κείμενό σας, αλλά είναι πολύ πιο εύκολο να χρησιμοποιήσετε επεκτάσιμο κείμενο που εμφανίζεται σε οποιαδήποτε συσκευή. Επομένως, είναι προτιμότερο να χρησιμοποιείτε μονάδες Em και Percent για το κείμενο ενός εγγράφου web.

EM ή ποσοστό;

Διαπιστώσαμε ότι το Point και το Pixel δεν είναι οι καλύτερες ενότητες για έγγραφα web. Άρα, μας μένουν το Em και το Percent. Θεωρητικά, το Em και το Percent είναι οι ίδιες μονάδες, αλλά στην πράξη υπάρχουν μικρές διαφορές μεταξύ τους που δεν μπορούν να αγνοηθούν.

Στο παραπάνω παράδειγμα, χρησιμοποιήσαμε τη μονάδα Ποσοστό ως βασικό μέγεθος γραμματοσειράς (για την ετικέτα σώματος). Εάν αλλάξετε το βασικό μέγεθος γραμματοσειράς από Ποσοστό σε Em (δηλαδή σώμα ( μέγεθος γραμματοσειράς: 1em; ) ), πιθανότατα δεν θα παρατηρήσετε διαφορά. Ας δούμε τι συμβαίνει όταν το μέγεθος της γραμματοσειράς του σώματος είναι 1em και όταν ο πελάτης αλλάζει τη ρύθμιση "Μέγεθος κειμένου" του προγράμματος περιήγησης (αυτή η ρύθμιση είναι διαθέσιμη σε ορισμένα προγράμματα περιήγησης, όπως ο Internet Explorer).

Όταν το μέγεθος κειμένου στο πρόγραμμα περιήγησης-πελάτη έχει οριστεί σε "μεσαίο", δεν υπάρχει διαφορά μεταξύ Em και Ποσοστό. Αλλά αν αλλάξετε αυτήν τη ρύθμιση, η διαφορά θα γίνει αρκετά αισθητή. Με την Μικρότερη ρύθμιση, τα Ems είναι πολύ μικρότερα από τα Ποσοστά. Και με τη ρύθμιση "Largest", ισχύει το αντίθετο - το Em είναι πολύ μεγαλύτερο από το Ποσοστό. Θα μπορούσατε να πείτε ότι οι μονάδες Em είναι κλιμακωμένες όπως θα έπρεπε, αλλά στην πράξη τέτοιο κείμενο κλιμακώνεται πολύ έντονα και σε ορισμένες συσκευές το μικρότερο κείμενο γίνεται δυσανάγνωστο.

συμπέρασμα

Θεωρητικά, η μονάδα Em είναι το νέο πρότυπο για τα μεγέθη γραμματοσειρών σε έγγραφα web, αλλά στην πράξη αποδεικνύεται ότι η μονάδα Percent είναι πιο φιλική προς το χρήστη. Όταν αλλάζουν οι ρυθμίσεις πελάτη, το κείμενο που χρησιμοποιεί τη μονάδα Ποσοστό κλιμακώνεται κατάλληλα, επιτρέποντας στους σχεδιαστές να διατηρούν την αναγνωσιμότητα, την προσβασιμότητα και τον οπτικό σχεδιασμό.

Νικητής: ποσοστό (%).

Συνήθως, όταν δημιουργώ ένα νέο σχέδιο, χρησιμοποιώ ποσοστά για το στοιχείο του σώματος (σώμα (μέγεθος γραμματοσειράς: 62,5%; ) ) και στη συνέχεια χρησιμοποιώ το ems για περαιτέρω κλιμάκωση. Εφόσον οι ρυθμίσεις σώματος έχουν οριστεί σε Ποσοστό, μπορείτε να χρησιμοποιήσετε είτε το Ποσοστό είτε το Em για οποιουσδήποτε άλλους κανόνες και επιλογείς CSS και να επωφεληθείτε από τα πλεονεκτήματα της χρήσης του Ποσοστό ως κύριου μεγέθους γραμματοσειράς σας.

Τα τελευταία χρόνια, αυτή η πρακτική έχει γίνει πολύ διαδεδομένη στον σχεδιασμό ιστοσελίδων.
Τα εικονοστοιχεία χρησιμοποιούνται πλέον ως έγκυρες μονάδες μεγέθους γραμματοσειράς (οι χρήστες μπορούν να χρησιμοποιήσουν τη λειτουργία "ζουμ" του προγράμματος περιήγησης για να διαβάσουν μικρό κείμενο). Ωστόσο, η χρήση εικονοστοιχείων καθίσταται προβληματική λόγω φορητών συσκευών με οθόνες πολύ υψηλής πυκνότητας εικονοστοιχείων (μερικά συσκευές Androidκαι το iPhone έχουν πυκνότητα 200-300 pixel ανά ίντσα, γεγονός που καθιστά τις γραμματοσειρές 11 και 12 pixel δύσκολο να διαβαστούν). Επομένως, συνεχίζω να χρησιμοποιώ το Ποσοστό ως κύριο μέγεθος γραμματοσειράς για έγγραφα web.