FontLens

Επιλέξτε ένα κείμενο, κάντε δεξί κλικ και ελέγξτε αμέσως τη γραμματοσειρά, το μέγεθος, το πάχος, το χρώμα και το CSS.

Έχετε προσγειωθεί ποτέ σε μια σελίδα, θαυμάσατε τη γραμματοσειρά και αναρωτηθήκατε "ποια γραμματοσειρά είναι αυτή;" Το FontLens απαντά σε αυτή την ερώτηση με ένα μόνο κλικ. Επιλέξτε οποιοδήποτε κείμενο σε οποιαδήποτε ιστοσελίδα, κάντε δεξί κλικ και επιλέξτε "Επιθεώρηση γραμματοσειράς με το FontLens". Ένας καθαρός, εστιασμένος πίνακας ανοίγει ακριβώς πάνω από τη σελίδα και αποκαλύπτει ακριβώς πώς είναι διαμορφωμένο αυτό το κείμενο: ο τύπος γραμματοσειράς, το μέγεθος, το βάρος, το ύψος γραμμής, το χρώμα και κάθε άλλη λεπτομέρεια πίσω από το σχέδιο. Είτε είστε σχεδιαστής που κάνει αντίστροφη μηχανική μιας διάταξης, είτε προγραμματιστής που αντιστοιχίζει μια προδιαγραφή, είτε απλά περίεργος για έναν όμορφο τίτλο, αυτό το εργαλείο μετατρέπει κάθε ιστοσελίδα σε ένα ανοιχτό βιβλίο τυπογραφίας. Το FontLens είναι ένας εντοπιστής γραμματοσειρών και ένας επιθεωρητής CSS σε ένα. Δεν ονομάζει απλά την οικογένεια γραμματοσειρών για εσάς, σας παρέχει έτοιμο προς χρήση κώδικα, ένα διαδραστικό εργαστήρι για να δοκιμάσετε ιδέες και εργαλεία προσβασιμότητας για να βεβαιωθείτε ότι το κείμενό σας είναι ευανάγνωστο. Χωρίς λογαριασμό. Χωρίς εγγραφή. Απλά επιλέξτε, κάντε δεξί κλικ και εξετάστε. 🔍 Τι μπορείτε να κάνετε • Αποκαλύψτε την πλήρη τυπογραφία οποιωνδήποτε επιλεγμένων λέξεων: οικογένεια γραμματοσειράς, μέγεθος γραμματοσειράς, βάρος γραμματοσειράς, ύψος γραμμής και το χρώμα με μια ματιά • Δείτε πρόσθετη διαμόρφωση που είναι εύκολο να χάσετε, όπως διάστημα γραμμάτων (letter-spacing), μετασχηματισμός κειμένου (text-transform) και στυλ γραμματοσειράς (font-style) • Αντιγράψτε οποιαδήποτε μεμονωμένη ιδιότητα με ένα κλικ ή αρπάξτε ολόκληρο το σύνολο κανόνων ως ένα πλήρες απόσπασμα CSS • Μετατρέψτε αυτό το απόσπασμα σε Tailwind, SCSS ή SASS μέσω απλών καρτελών, και στη συνέχεια αντιγράψτε ολόκληρο ή γραμμή προς γραμμή • Πειραματιστείτε σε μια ζωντανή, επεξεργάσιμη προεπισκόπηση: ξαναγράψτε τις λέξεις του δείγματος, αλλάξτε τις τιμές, αλλάξτε το φόντο και παρακολουθήστε το να ενημερώνεται αμέσως • Αναγνωρίστε από πού προέρχεται μια γραμματοσειρά ιστού με ένα ειδικό σήμα παρόχου (Google Fonts, Adobe Fonts, αυτο-φιλοξενούμενη ή ενσωματωμένη γραμματοσειρά συστήματος) • Αποθηκεύστε μια γραμματοσειρά ιστού στον υπολογιστή σας με το κουμπί "Λήψη γραμματοσειράς", απευθείας από την ίδια της την πηγή • Ελέγξτε την αντίθεση χρωμάτων έναντι των προτύπων WCAG, με την ακριβή αναλογία συν αποτελέσματα επιτυχίας ή αποτυχίας AA και AAA • Επιλέξτε και δειγματίστε χρώματα με έναν πλήρη επιλογέα, συμπεριλαμβανομένου ενός εργαλείου επιλογής χρώματος (eyedropper) για να αρπάξετε οποιοδήποτε pixel στην οθόνη • Αλλάξτε μονάδες μέτρησης μεταξύ px, rem, pt και em, που εφαρμόζονται τόσο στα πεδία όσο και στον εξαγόμενο κώδικα 🖱️ Πώς λειτουργεί Η χρήση του FontLens διαρκεί δευτερόλεπτα. Επισημάνετε τις λέξεις που θέλετε να μελετήσετε, κάντε δεξί κλικ στην επιλογή και επιλέξτε "Επιθεώρηση γραμματοσειράς με το FontLens" από το μενού. Ο πίνακας εμφανίζεται πάνω από την τρέχουσα σελίδα, όμορφα διαμορφωμένος ώστε να μην συγκρούεται ποτέ με την εμφάνιση του ίδιου του ιστότοπου. Από εκεί μπορείτε να διαβάσετε τις λεπτομέρειες, να αντιγράψετε ό,τι χρειάζεστε ή να ξεκινήσετε την επεξεργασία. Η ζωντανή προεπισκόπηση είναι εκεί που τα πράγματα γίνονται διασκεδαστικά. Αλλάξτε τη διατύπωση για να δοκιμάσετε έναν πραγματικό τίτλο, αλλάξτε το μέγεθος, προσαρμόστε το βάρος ή ορίστε ένα νέο χρώμα φόντου για να δείτε πώς συμπεριφέρεται το κείμενο. Οι επεξεργασίες σας παραμένουν καθώς μετακινείστε μεταξύ των σελίδων και επιστρέφετε αργότερα, οπότε μια ιδέα που ξεκινήσατε σε έναν ιστότοπο σας περιμένει στον επόμενο. Όταν θέλετε τις αρχικές τιμές πίσω, το κουμπί "Επαναφορά στον ιστότοπο" επαναφέρει όλα όσα χρησιμοποιεί πραγματικά η σελίδα. Χρειάζεστε το ανεπεξέργαστο στοιχείο; Για μια γραμματοσειρά ιστού με δυνατότητα λήψης, ένα κουμπί ανακτά το πραγματικό αρχείο από τη θέση @font-face. Για μια γραμματοσειρά που παρέχεται ήδη με το λειτουργικό σας σύστημα, το FontLens σας ενημερώνει ότι είναι ενσωματωμένη γραμματοσειρά, οπότε ξέρετε ότι είναι διαθέσιμη χωρίς καμία λήψη. 🔒 Πρώτα η Προστασία Προσωπικών Δεδομένων Το FontLens λειτουργεί εξ ολοκλήρου μέσα στο πρόγραμμα περιήγησής σας. Δεν γίνεται συλλογή δεδομένων, παρακολούθηση, αναλύσεις και δεν εμπλέκονται εξωτερικοί διακομιστές στην επιθεώρηση κειμένου. Ό,τι εξετάζετε παραμένει στον υπολογιστή σας. Η επέκταση κάνει ακριβώς μία αίτηση δικτύου, και μόνο όταν πατήσετε σκόπιμα "Λήψη γραμματοσειράς", οπότε επικοινωνεί με την πηγή της γραμματοσειράς για να ανακτήσει το αρχείο. Τίποτα άλλο δεν φεύγει από τη συσκευή σας. Οι άδειες είναι σκόπιμα περιορισμένες. Η άδεια του μενού περιβάλλοντος προσθέτει την καταχώριση δεξί κλικ. Η άδεια ενεργής καρτέλας επιτρέπει στο εργαλείο να διαβάσει το κείμενο που επιλέξατε στην καρτέλα όπου το καλείτε, και πουθενά αλλού. Ο χώρος αποθήκευσης διατηρεί το κείμενο προεπισκόπησης και τις προτιμήσεις σας για μονάδες και μορφή, ώστε να τις θυμάται την επόμενη φορά. Δεν υπάρχει ευρεία πρόσβαση στο ιστορικό περιήγησής σας και καμία γενική άδεια κεντρικού υπολογιστή. 👥 Σε ποιους απευθύνεται • Σχεδιαστές ιστοσελίδων που θέλουν να αναγνωρίσουν μια γραμματοσειρά, να καταγράψουν μια παλέτα και να επαναχρησιμοποιήσουν στυλ γρήγορα • Προγραμματιστές front-end που αντιστοιχίζουν ένα mockup ή μεταφέρουν ακριβείς τιμές γραμματοσειράς και διαστημάτων σε κώδικα • Μηχανικοί UI και UX που δημιουργούν συνεπή, συμβατά με το brand συστήματα γραμματοσειρών • Μαθητές που μαθαίνουν CSS και τυπογραφία και θέλουν να δουν πώς κατασκευάζονται οι πραγματικοί ιστότοποι • Ελεγκτές προσβασιμότητας που επαληθεύουν ότι το κείμενο πληροί τις απαιτήσεις αντίθεσης του WCAG πριν από τη δημοσίευση • Bloggers, marketers και περίεργοι αναγνώστες που απλά θέλουν να μάθουν ποια γραμματοσειρά χρησιμοποιεί ένας ιστότοπος ✨ Γιατί οι άνθρωποι το κρατούν • Ένα δεξί κλικ σας δίνει την απάντηση αντί να ψάχνετε στα εργαλεία προγραμματιστών • Ο κώδικας είναι έτοιμος για αντιγραφή σε απλό CSS, Tailwind, SCSS ή SASS, οπότε εισάγεται απευθείας στο έργο σας • Η επεξεργάσιμη προεπισκόπηση σας επιτρέπει να πρωτοτυποποιήσετε επιλογές γραμματοσειράς χωρίς να αγγίξετε ούτε μία γραμμή κώδικα • Ο έλεγχος αντίθεσης ενσωματώνει την προσβασιμότητα στη ροή εργασιών σας αντί να την αφήνει ως εκ των υστέρων σκέψη • Ο επιλογέας χρωμάτων και ο επιλογέας απόχρωσης σημαίνουν ότι μπορείτε να δειγματίσετε και να επαναχρησιμοποιήσετε ακριβή χρώματα από οπουδήποτε στη σελίδα • Τα φωτεινά και σκούρα θέματα ακολουθούν αυτόματα το λειτουργικό σας σύστημα, οπότε αισθάνεται οικείο μέρα ή νύχτα • Η εναλλαγή μονάδων μεταξύ px, rem, pt και em διατηρεί την έξοδο ευθυγραμμισμένη με τον τρόπο που είναι γραμμένος ο κώδικάς σας 🎨 Μια πιο προσεκτική ματιά στις λεπτομέρειες Η τυπογραφία είναι κάτι περισσότερο από ένα όνομα. Το FontLens αναδεικνύει τις μικρές αποφάσεις που κάνουν το κείμενο να φαίνεται σωστό, από το βάρος ενός τίτλου μέχρι την απόσταση γραμμών και την διακριτική ρύθμιση του διαστήματος γραμμάτων. Βλέποντας αυτές τις τιμές δίπλα-δίπλα σας βοηθά να καταλάβετε γιατί ένα σχέδιο λειτουργεί και πώς να το αναδημιουργήσετε. Η ετικέτα του παρόχου προσθέτει επίσης πλαίσιο, λέγοντάς σας με μια ματιά αν κοιτάζετε ένα στοιχείο Google Fonts, ένα γραμματοσειρά Adobe Fonts, ένα αυτο-φιλοξενούμενο αρχείο ή μια προεπιλεγμένη γραμματοσειρά συστήματος, κάτι που είναι συχνά η πρώτη ένδειξη όταν ξεκινάτε να ταιριάξετε ή να βρείτε μια γραμματοσειρά. Τα εργαλεία χρωμάτων ξεπερνούν μια στατική ανάγνωση. Ο επιλογέας προσφέρει ένα τετράγωνο HSV με ρυθμιστικά απόχρωσης και άλφα, και επικοινωνεί σε HEX, RGB και HSL ώστε να μπορείτε να εργάζεστε σε οποιαδήποτε μορφή σας ταιριάζει. Συνδυάστε το με το εργαλείο επιλογής χρώματος και μπορείτε να πάρετε την ακριβή απόχρωση οποιουδήποτε στοιχείου και να την ρίξετε στην προεπισκόπησή σας ή στις σημειώσεις σας. 🚀 Ξεκινήστε την επιθεώρηση Προσθέστε το FontLens, επισημάνετε κάποιες λέξεις και κάντε δεξί κλικ για να αποκαλύψετε την τυπογραφία, τα στυλ και τα χρώματα πίσω από οποιαδήποτε σελίδα. Είναι ένας γρήγορος, ιδιωτικός και πραγματικά χρήσιμος σύντροφος για όποιον ενδιαφέρεται για το πώς διαβάζεται το διαδίκτυο. Εγκαταστήστε το, κρατήστε το εύχρηστο και μην αναρωτιέστε ποτέ ξανά για μια μυστηριώδη γραμματοσειρά.