Το List All Fonts σαρώνει οποιαδήποτε ιστοσελίδα και παρουσιάζει πλήρη απογραφή κάθε font family που χρησιμοποιείται — web fonts φορτωμένα από CDN, self-hosted fonts και fallbacks συστήματος. Κάθε γραμματοσειρά εμφανίζει ζωντανή προεπισκόπηση κειμένου, τα φορτωμένα βάρη και στυλ, τον αριθμό στοιχείων που τη χρησιμοποιούν και αντιγραφή με ένα κλικ για τη δήλωση CSS font-family.
Η αναγνώριση γραμματοσειρών σε ιστότοπο που θαυμάζετε απαιτούσε παλιότερα επιθεώρηση στοιχείων ένα-ένα στο DevTools, έλεγχο της υπολογισμένης ιδιότητας font-family ή χρήση επεκτάσεων προγράμματος περιήγησης που ανιχνεύουν μόνο μία γραμματοσειρά τη φορά. Το List All Fonts σάς δίνει την πλήρη εικόνα σε μία προβολή — κάθε γραμματοσειρά φορτωμένη και χρησιμοποιούμενη στη σελίδα, με ζωντανά δείγματα κειμένου που δείχνουν ακριβώς πώς αποδίδεται κάθε γραμματοσειρά. Το εργαλείο διαχωρίζει web fonts (φορτωμένα μέσω @font-face ή Google Fonts) από system fonts (Arial, Helvetica, Georgia κ.λπ.), εμφανίζοντας την πλήρη στοίβα font-family. Για κάθε γραμματοσειρά βλέπετε ποια βάρη είναι φορτωμένα (400, 600, 700), ποια στοιχεία τη χρησιμοποιούν και ποια μεγέθη γραμματοσειράς εφαρμόζονται. Κάντε κλικ σε οποιαδήποτε γραμματοσειρά για να αντιγράψετε τη δήλωσή της CSS — έτοιμη για επικόλληση στο δικό σας project. Η ζωντανή προεπισκόπηση χρησιμοποιεί την πραγματική απόδοση γραμματοσειράς από τη σελίδα, όχι γενική προεπισκόπηση.
Παραθέτει κάθε font-family που αποδίδεται πραγματικά στη σελίδα, συμπεριλαμβανομένων web fonts από Google Fonts, Adobe Fonts ή προσαρμοσμένες δηλώσεις @font-face, και fallbacks συστήματος. Εμφανίζει τον συνολικό αριθμό μοναδικών font families που βρέθηκαν.
Κάθε γραμματοσειρά εμφανίζεται με ζωντανό δείγμα κειμένου αποδοσμένο χρησιμοποιώντας το πραγματικό αρχείο γραμματοσειράς φορτωμένο στη σελίδα. Βλέπετε πραγματική απόδοση — όχι γενική προεπισκόπηση.
Για κάθε γραμματοσειρά, δείτε ποια βάρη είναι φορτωμένα (Regular 400, Medium 500, SemiBold 600, Bold 700) και αν είναι διαθέσιμες παραλλαγές πλάγιου. Σας βοηθά να κατανοήσετε το φορτωμένο υποσύνολο της γραμματοσειράς.
Δείτε πόσα στοιχεία στη σελίδα χρησιμοποιούν κάθε γραμματοσειρά. Η πιο χρησιμοποιούμενη γραμματοσειρά παρατίθεται πρώτη. Μάθετε ποιες γραμματοσειρές είναι κύριες (κύριο κείμενο) και ποιες δευτερεύουσες (χρησιμοποιούνται σε λίγα μόνο στοιχεία).
Κάντε κλικ σε οποιαδήποτε καταχώρηση γραμματοσειράς για να αντιγράψετε την πλήρη δήλωσή της CSS font-family (π.χ. font-family: 'Inter', sans-serif) στο πρόχειρό σας. Έτοιμη για άμεση επικόλληση στο stylesheet σας.
Κάθε γραμματοσειρά εμφανίζει την πηγή της: Google Fonts (με τη συγκεκριμένη URL), Adobe Fonts, self-hosted (με την URL @font-face) ή system font. Μάθετε ακριβώς από πού προέρχεται κάθε γραμματοσειρά.
Επισκεφθείτε ιστότοπο με όμορφη τυπογραφία και δείτε αμέσως κάθε γραμματοσειρά που χρησιμοποιεί — ονόματα, βάρη και από πού προέρχονται. Τέλος στο «τι γραμματοσειρά είναι αυτή;» μαντεύοντας ή χρησιμοποιώντας μη αξιόπιστα εργαλεία αναγνώρισης γραμματοσειρών.
Πόσες γραμματοσειρές φορτώνει η σελίδα σας; Υπάρχουν αχρησιμοποίητες γραμματοσειρές που κατεβαίνουν αλλά δεν εφαρμόζονται; Το List All Fonts εμφανίζει πραγματική χρήση — αν μια φορτωμένη γραμματοσειρά έχει 0 στοιχεία που τη χρησιμοποιούν, είναι σπατάλη bandwidth.
Τεκμηριώστε την τυπογραφία του project σας εκτελώντας List All Fonts σε κάθε σελίδα. Επαληθεύστε ότι οι σωστές γραμματοσειρές και βάρη χρησιμοποιούνται συνεπώς σε ολόκληρο τον ιστότοπο — εντοπίστε δηλώσεις font-family που αποκλίνουν.
Αναγνωρίσατε γραμματοσειρά που σας αρέσει αλλά είναι επί πληρωμή; Αντιγράψτε το όνομά της και αναζητήστε δωρεάν εναλλακτικές με παρόμοια χαρακτηριστικά. Η ζωντανή προεπισκόπηση σάς βοηθά να θυμάστε ακριβώς πώς έδειχνε.
Εκτελέστε List All Fonts στην ίδια σελίδα σε διαφορετικούς browsers για να επαληθεύσετε ότι αποδίδονται οι ίδιες γραμματοσειρές παντού. Οι στοίβες system font επιλύονται διαφορετικά σε διαφορετικά λειτουργικά συστήματα — εντοπίστε ασυνέπειες.
Ανοίξτε το floating dock του DevSuite Pro και κάντε κλικ στο εικονίδιο List All Fonts. Το εργαλείο σαρώνει τα computed styles και τους κανόνες @font-face της σελίδας.
Ένα panel εμφανίζει όλες τις γραμματοσειρές που βρέθηκαν στη σελίδα, ταξινομημένες κατά συχνότητα χρήσης. Κάθε καταχώρηση εμφανίζει το όνομα γραμματοσειράς, κείμενο προεπισκόπησης, βάρη και αριθμό στοιχείων.
Κάντε κύλιση στις ζωντανές προεπισκοπήσεις για να δείτε πώς αποδίδεται κάθε γραμματοσειρά. Συγκρίνετε τη γραμματοσειρά επικεφαλίδων, κυρίου κειμένου και accent της σελίδας.
Κάντε κλικ σε οποιαδήποτε καταχώρηση γραμματοσειράς για να αντιγράψετε τη δήλωσή της CSS font-family. Κάντε κλικ στον σύνδεσμο πηγής για να επισκεφθείτε την προέλευση της γραμματοσειράς (σελίδα Google Fonts, CDN URL κ.λπ.).
Επικολλήστε τη δήλωση font-family στο CSS σας και φορτώστε τη γραμματοσειρά από την ίδια πηγή για να τη χρησιμοποιήσετε στο δικό σας project.
Εγκαταστήστε το DevSuite Pro δωρεάν και ξεκλειδώστε 39+ εργαλεία προγραμματιστή για το πρόγραμμα περιήγησής σας.
