Συνδυασμός Γραμματοσειρών & Κατάλογος Google Fonts

Όλα τα εργαλεία

Περιηγηθείτε σε έναν επιμελημένο κατάλογο δημοφιλών Google Fonts με ζωντανές προεπισκοπήσεις, φιλτράρετε κατά κατηγορία και αναζητήστε κατά όνομα, και αντιγράψτε έτοιμο προς επικόλληση CSS ενώ εξερευνάτε προτεινόμενους συνδυασμούς γραμματοσειρών — όλα στον περιηγητή σας.

Μέγεθος 34px

Όλα εκτελούνται στον περιηγητή σας — οι γραμματοσειρές φορτώνονται από τα Google Fonts μόνο για ζωντανή προεπισκόπηση, τίποτα δεν μεταφορτώνεται, χωρίς εγγραφή, εντελώς δωρεάν.

Σχετικά με το Συνδυασμός Γραμματοσειρών & Κατάλογος Google Fonts

Αυτός ο κατάλογος γραμματοσειρών συγκεντρώνει 80 δημοφιλείς γραμματοσειρές Google Fonts σε μία σελίδα με δυνατότητα αναζήτησης, καθεμία αποδοσμένη ως ζωντανό δείγμα με μια παγγράμματη πρόταση, μια γραμμή αλφαβήτου και αριθμών, και ένα σήμα κατηγορίας. Καλύπτει πέντε οικογένειες γραμματοσειρών — sans-serif, serif, display, χειρόγραφη και monospace — ώστε να συγκρίνετε πραγματικές μορφές γραμμάτων αντί να μαντεύετε από τα ονόματα.

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

Όταν μια γραμματοσειρά ή ένας συνδυασμός ταιριάζει, ένα κλικ αντιγράφει έτοιμο προς επικόλληση CSS — μια γραμμή @import για το φύλλο στυλ Google Fonts συν την αντίστοιχη στοίβα font-family με μια λογική εναλλακτική. Οι γραμματοσειρές φορτώνονται από το Google Fonts μόνο για τις ζωντανές προεπισκοπήσεις· τίποτα από όσα πληκτρολογείτε δεν μεταφορτώνεται πουθενά.

Πώς να χρησιμοποιήσετε το Συνδυασμός Γραμματοσειρών & Κατάλογος Google Fonts

  1. Περιηγηθείτε στις κάρτες γραμματοσειρών, καθεμία δείχνοντας το όνομά της, το σήμα κατηγορίας και ζωντανό δείγμα κειμένου γραμμένο στην πραγματική γραμματοσειρά.
  2. Χρησιμοποιήστε το πλαίσιο αναζήτησης για να βρείτε μια γραμματοσειρά κατά όνομα, ή κάντε κλικ σε ένα chip κατηγορίας (Sans-serif, Serif, Display, Handwriting, Monospace) για να φιλτράρετε το πλέγμα.
  3. Σύρετε τον ρυθμιστή μεγέθους (16–72 px) για να προεπισκοπήσετε τη γραμμή δείγματος στο επιθυμητό μέγεθος επικεφαλίδας ή κειμένου σώματος.
  4. Κάντε κλικ σε ένα chip «Pairs with» ή στο κουμπί «Preview pairing» για να δείτε έναν τίτλο και μια παράγραφο σώματος στον προτεινόμενο συνδυασμό.
  5. Κάντε κλικ στο κουμπί «CSS» σε μια κάρτα ή στην προεπισκόπηση συνδυασμού για να αντιγράψετε τη γραμμή @import και τις δηλώσεις font-family στο πρόχειρό σας.

Συχνές ερωτήσεις

Διαθέτει ένα επιμελημένο σύνολο 80 ευρέως χρησιμοποιούμενων γραμματοσειρών Google Fonts κατανεμημένων σε πέντε κατηγορίες: sans-serif, serif, display, χειρόγραφη και monospace. Κάθε chip κατηγορίας εμφανίζει ζωντανό μετρητή ώστε να βλέπετε πόσες γραμματοσειρές ταιριάζουν με το τρέχον φίλτρο σας.

Κάθε γραμματοσειρά παραθέτει μία ή δύο επιλεγμένες συνεργαζόμενες γραμματοσειρές που αντιθέτουν καλά μαζί της — συνήθως μια γραμματοσειρά display ή serif για επικεφαλίδες συνδυασμένη με μια ευανάγνωστη γραμματοσειρά κειμένου. Η προεπισκόπηση συνδυασμού δείχνει τους ακριβείς ρόλους επικεφαλίδας και σώματος για κάθε συνδυασμό.

Για μία μόνο γραμματοσειρά, παίρνετε μια γραμμή @import url() για το endpoint css2 του Google Fonts (κανονικά και έντονα βάρη) συν μια στοίβα font-family με τη σωστή γενική εναλλακτική. Για έναν συνδυασμό, παίρνετε και τα δύο imports και ξεχωριστές δηλώσεις για επικεφαλίδες και σώμα.

Ναι, οι ζωντανές προεπισκοπήσεις φορτώνουν τις γραμματοσειρές από το CDN του Google Fonts — αυτό είναι το μόνο εξωτερικό αίτημα της σελίδας. Οι αναζητήσεις σας, οι επιλογές φίλτρου και το αντιγραμμένο CSS παραμένουν στο πρόγραμμα περιήγησής σας· τίποτα δεν μεταφορτώνεται ή αποθηκεύεται.

Ναι, η περιήγηση, η προεπισκόπηση συνδυασμών και η αντιγραφή CSS είναι όλα δωρεάν χωρίς απαίτηση λογαριασμού. Οι γραμματοσειρές που παρατίθενται είναι Google Fonts, οι οποίες είναι οι ίδιες δωρεάν για χρήση σε προσωπικά και εμπορικά έργα υπό τις ανοιχτές άδειές τους.

Μπορείτε να προσαρμόσετε το μέγεθος δείγματος οπουδήποτε από 16 px έως 72 px με τον ρυθμιστή μεγέθους, ο οποίος ενημερώνει κάθε κάρτα ταυτόχρονα. Αυτό διευκολύνει τη σύγκριση υποψηφίων στο ακριβές μέγεθος που σκοπεύετε να χρησιμοποιήσετε για επικεφαλίδες ή κείμενο σώματος.
Κοινοποίηση
Σχετικά Εργαλεία
Δημιουργός Χρωματικής Παλέτας Δημιουργήστε αρμονικές χρωματικές παλέτες από ένα διαδραστικό χρωματικό τροχό — εφαρμόστε κανόνες αρμονίας όπως analogous, complementary ή triad, και αντιγράψτε οποιαδήποτε τιμή άμεσα. Δωρεάν
Αναμείκτης Χρωμάτων Ανακατέψτε ένα αρχικό χρώμα με ένα τελικό σε έως 10 βήματα — προεπισκοπήστε τη διαβάθμιση, πάρτε κάθε απόχρωση και αντιγράψτε οποιαδήποτε μορφή άμεσα. Δωρεάν
Δημιουργός Αποχρώσεων Χρώματος Δημιουργήστε πλήρη γκάμα tints και αποχρώσεων από ένα μόνο χρώμα — επιλέξτε βήμα σκούρανσης/φωτίσματος και αριθμό αποχρώσεων, μετά αντιγράψτε οποιαδήποτε τιμή άμεσα. Δωρεάν
Εξαγωγέας Χρωμάτων Εικόνας Τραβήξτε μια εκλεπτυσμένη, έτοιμη για αντιγραφή χρωματική παλέτα από οποιαδήποτε εικόνα. Δωρεάν
Παλέτα Web-Safe Χρωμάτων Περιηγηθείτε στα κλασικά 216 web-safe χρώματα ως πλέγμα δειγμάτων με δυνατότητα κλικ — ταξινομήστε κατά απόχρωση ή σειρά κύβου, φιλτράρετε κατά hex και αντιγράψτε άμεσα οποιαδήποτε τιμή HEX ή rgb(). Δωρεάν
Ελεγκτής Αντίθεσης Χρωμάτων Ελέγξτε τον λόγο αντίθεσης WCAG μεταξύ χρώματος κειμένου και φόντου — δείτε βαθμολογίες AA/AAA για κανονικό κείμενο, μεγάλο κείμενο και στοιχεία UI, με ζωντανή προεπισκόπηση και προτάσεις προσβάσιμων χρωμάτων. Δωρεάν
Χρειάζεστε βοήθεια;
Βρήκατε πρόβλημα με αυτό το εργαλείο; Ενημερώστε μας.
Αναφορά προβλήματος

Προσθέστε αυτό το δωρεάν εργαλείο στον δικό σας ιστότοπο — αντιγράψτε και επικολλήστε τον παρακάτω κώδικα.