FontLens

Δωρεάν επέκταση για Chrome

Ποια είναι αυτή η γραμματοσειρά; Δεξί κλικ και δείτε το CSS

Επιλέξτε κείμενο σε οποιονδήποτε ιστότοπο, κάντε δεξί κλικ και επιλέξτε Inspect font with FontLens. Ανοίγει ένα εργαλείο ελέγχου γραμματοσειράς πάνω στη σελίδα με οικογένεια, μέγεθος, βάρος, ύψος γραμμής και χρώμα, έτοιμο CSS για αντιγραφή και κουμπί λήψης της γραμματοσειράς.

Προσθήκη στο Chrome — δωρεάν

Λειτουργεί επίσης σε Edge, Brave, Opera και άλλους Chromium browsers.

Το εργαλείο FontLens: δείγμα Ag ανάμεσα στους οδηγούς κεφαλαίου, x-height και γραμμής βάσης, ιδιότητες γραμματοσειράς και απόσπασμα Tailwind

Με μια ματιά

Τι κάνει
Εμφανίζει τη γραμματοσειρά του κειμένου που επιλέγετε: οικογένεια, μέγεθος, βάρος, ύψος γραμμής, χρώμα και άλλα στυλ που διαφέρουν από τις προεπιλογές, με έτοιμο CSS για αντιγραφή.
Πώς ξεκινάτε
Επιλέξτε κείμενο, κάντε δεξί κλικ και επιλέξτε Inspect font with FontLens. Το στοιχείο μενού εμφανίζεται μόνο όταν έχετε επιλέξει κείμενο.
Αντιγραφή ως
CSS, SCSS, SASS ή Tailwind, με μέγεθος σε px, rem, pt ή em.
Αρχείο γραμματοσειράς
Το Download font ανακτά τη γραμματοσειρά ιστού από την πηγή @font-face. Ελέγξτε την άδειά της πριν τη χρησιμοποιήσετε.
Για ποιους είναι
Σχεδιαστές ιστοσελίδων, front-end developers, ελεγκτές προσβασιμότητας και σπουδαστές CSS.
Τιμή
Δωρεάν. Χωρίς λογαριασμό ή επί πληρωμή έκδοση.
Δεδομένα
Λειτουργεί στο πρόγραμμα περιήγησής σας. Χωρίς διακομιστές ή αναλυτικά στοιχεία. Το μόνο αίτημα είναι η λήψη γραμματοσειράς που ξεκινάτε.
Λειτουργεί σε
Chrome και άλλα Chromium browsers που εγκαθιστούν από το Chrome Web Store. Όχι σε Firefox ή Safari.
Περιορισμοί
Διαβάζει το CSS πραγματικού κειμένου σε ιστοσελίδες. Όχι κείμενο σε εικόνες, καμβάδες ή PDF, ούτε στις ίδιες τις σελίδες του Chrome.
Έκδοση
2.2.0, ενημερώθηκε 23 Οκτωβρίου 2026

Δύο κλικ μέχρι τη γραμματοσειρά

  1. 1

    Επιλέξτε κείμενο

    Έναν τίτλο, μια παράγραφο ή μια ετικέτα κουμπιού σε οποιαδήποτε ιστοσελίδα.

  2. 2

    Κάντε δεξί κλικ

    Επιλέξτε Inspect font with FontLens. Το εργαλείο ανοίγει πάνω στη σελίδα και εμφανίζει οικογένεια, μέγεθος, βάρος, ύψος γραμμής και χρώμα.

  3. 3

    Αντιγράψτε ή προσαρμόστε

    Αντιγράψτε το CSS ή το Tailwind, δοκιμάστε άλλο μέγεθος ή χρώμα στη ζωντανή προεπισκόπηση ή κατεβάστε το αρχείο γραμματοσειράς.

Γιατί το ανοίγουν

Aa

Βρείτε τη γραμματοσειρά

Είδατε έναν τίτλο που σας αρέσει; Επιλέξτε τον για να δείτε την οικογένεια, το βάρος και την πηγή: Google Fonts, Adobe Fonts ή τον ίδιο τον ιστότοπο.

{ }

Ταιριάξτε ένα mockup

Συγκρίνετε τις τιμές στη ζωντανή σελίδα με το αρχείο σχεδίασης και αντιγράψτε τους κανόνες ως CSS, SCSS, SASS ή Tailwind.

4.5:1

Ελέγξτε την αντίθεση

Δείτε την αναλογία αντίθεσης με ενδείξεις AA και AAA και δοκιμάστε πιο σκούρο κείμενο ή πιο ανοιχτό φόντο πριν δημοσιευτεί το σχέδιο.

Τι κάνει

  • Δείγμα με οδηγούς

    Η πρώτη οικογένεια της στοίβας, σχεδιασμένη ανάμεσα σε οδηγούς κεφαλαίου, x-height και γραμμής βάσης, μετρημένους από την ίδια τη γραμματοσειρά.

  • μορφές αποσπασμάτων

    CSS, SCSS, SASS και Tailwind. Αντιγράψτε ολόκληρο το απόσπασμα ή μία γραμμή· η τελευταία μορφή σας αποθηκεύεται.

  • Οι μονάδες σας

    Εμφανίστε το μέγεθος σε px, rem, pt ή em, στα πεδία και στο απόσπασμα. Το rem ακολουθεί το μέγεθος ρίζας της σελίδας.

  • Πηγή γραμματοσειράς

    Μια ένδειξη δείχνει από πού προέρχεται η γραμματοσειρά: Google Fonts, Adobe Fonts, φιλοξενία στον ιστότοπο ή γραμματοσειρά συστήματος στον υπολογιστή σας.

  • Έλεγχος αντίθεσης

    Η αναλογία κειμένου και φόντου με ενδείξεις AA και AAA για κανονικό και μεγάλο κείμενο, που ενημερώνεται όταν αλλάζετε χρώματα.

  • Download font

    Λαμβάνει το αρχείο από την πηγή @font-face και το ονομάζει σύμφωνα με την οικογένεια. Αν ο διακομιστής το μπλοκάρει, η πηγή ανοίγει σε νέα καρτέλα.

Γιατί αργεί τόσο να βρείτε μια γραμματοσειρά στο DevTools

Μια σελίδα δηλώνει λίστα γραμματοσειρών και το πρόγραμμα περιήγησης χρησιμοποιεί την πρώτη διαθέσιμη. Για να δείτε ποια είναι, ανοίγετε το DevTools, βρίσκετε το στοιχείο, διαβάζετε το Computed panel και μετά ψάχνετε το αρχείο στο Network panel. Μέγεθος, βάρος, ύψος γραμμής και χρώμα βρίσκονται σε διαφορετικά σημεία.

Το FontLens διαβάζει το υπολογισμένο στυλ του επιλεγμένου κειμένου και τα συγκεντρώνει σε ένα πάνελ: τη στοίβα οικογενειών, δείγμα της πρώτης οικογένειας, τις τιμές, την πηγή της γραμματοσειράς και το CSS. Διαβάζει το CSS της σελίδας, επομένως δεν μπορεί να αναγνωρίσει γραμματοσειρά μέσα σε εικόνα.

Τίποτα δεν φεύγει από το πρόγραμμα περιήγησής σας

  • Χωρίς λογαριασμό ή διακομιστές

    Το FontLens λειτουργεί στο πρόγραμμα περιήγησής σας. Χωρίς αναλυτικά στοιχεία ή παρακολούθηση.

  • Διαβάζει ό,τι επιλέγετε

    Το εργαλείο διαβάζει τα στυλ του κειμένου στο οποίο κάνατε δεξί κλικ. Δεν αποστέλλονται πληροφορίες για τη σελίδα.

  • Τέσσερις άδειες

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

Chrome DevTools ή FontLens

Chrome DevTools ή FontLensChrome DevToolsFontLens
Εύρεση της γραμματοσειράς ενός κειμένουΕπιθεώρηση, εύρεση στοιχείου, άνοιγμα του Computed panelΕπιλέξτε κείμενο, δεξί κλικ, ένα στοιχείο μενού
Αντιγραφή ως Tailwind ή SCSSΌχι, αντιγράφετε τις τιμές μία μίαΚαρτέλα CSS, SCSS, SASS ή Tailwind
Προέλευση γραμματοσειράςΑναζήτηση του αρχείου στο Network panelΈνδειξη: Google Fonts, Adobe Fonts, φιλοξενία στον ιστότοπο ή σύστημα
Λήψη αρχείου γραμματοσειράςΕύρεση στο Network ή Sources και αποθήκευσηΈνα κουμπί
Έλεγχος αντίθεσηςΣτον επιλογέα χρώματος του Styles panelΕνδείξεις AA και AAA δίπλα σε ζωντανή προεπισκόπηση
ΤιμήΕνσωματωμένοΔωρεάν

Ερωτήσεις

Πώς βρίσκω ποια γραμματοσειρά χρησιμοποιεί ένας ιστότοπος;

Προσθέστε το FontLens στο Chrome, επιλέξτε κείμενο στον ιστότοπο, κάντε δεξί κλικ και επιλέξτε Inspect font with FontLens. Θα δείτε οικογένεια, μέγεθος, βάρος, ύψος γραμμής, χρώμα και την πηγή της γραμματοσειράς.

Πώς αντιγράφω το CSS μιας γραμματοσειράς από ιστότοπο;

Στο εργαλείο επιλέξτε την καρτέλα CSS, SCSS, SASS ή Tailwind και πατήστε Copy all ή αντιγράψτε μία γραμμή. Αν χρειάζεται, αλλάξτε πρώτα τη μονάδα σε px, rem, pt ή em.

Μπορώ να κατεβάσω γραμματοσειρά από έναν ιστότοπο;

Όταν το κείμενο χρησιμοποιεί γραμματοσειρά ιστού, το Download font λαμβάνει το αρχείο από την πηγή @font-face. Για μια γραμματοσειρά συστήματος δεν υπάρχει αρχείο για λήψη. Ελέγξτε την άδεια πριν τη χρησιμοποιήσετε στο έργο σας.

Μπορεί το FontLens να αναγνωρίσει γραμματοσειρά σε εικόνα ή PDF;

Όχι. Διαβάζει το CSS πραγματικού κειμένου σε ιστοσελίδες, επομένως δεν αναγνωρίζει γραμματοσειρές σε εικόνες, καμβάδες ή PDF.

Πώς ελέγχω την αντίθεση κειμένου για WCAG;

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

Μπορεί να εμφανίζει μέγεθος σε rem αντί για px;

Ναι. Επιλέξτε px, rem, pt ή em και τα πεδία μαζί με το απόσπασμα θα ακολουθήσουν. Το rem υπολογίζεται από το μέγεθος ρίζας της σελίδας και η επιλογή σας αποθηκεύεται.

Είναι δωρεάν; Συλλέγει δεδομένα;

Είναι δωρεάν και δεν χρειάζεται λογαριασμό. Δεν έχει διακομιστές ή αναλυτικά στοιχεία· το μόνο αίτημα είναι η λήψη γραμματοσειράς που ξεκινάτε.

Λειτουργεί σε Edge, Brave ή Opera;

Οι περισσότεροι Chromium browsers εγκαθιστούν επεκτάσεις από το Chrome Web Store, συμπεριλαμβανομένων των Edge, Brave, Opera και Vivaldi. Τα Firefox και Safari δεν υποστηρίζονται.

Άλλες δωρεάν επεκτάσεις από την PYROCTAL

Ποια γραμματοσειρά είναι; Δύο κλικ.

Προσθήκη στο Chrome — δωρεάν