Μετατροπέας εικόνας


Δωρεάν γραμματοσειρές — Κορυφαίοι ιστότοποι, ζωντανές προεπισκοπήσεις και τρόπος χρήσης τους

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

Γραμματοσειρές Google

OFL

Η μεγαλύτερη βιβλιοθήκη ανοιχτού κώδικα με γρήγορο παγκόσμιο CDN, υποσύνολα και μεταβλητές γραμματοσειρές. Ιδανικό για ιστό και εφαρμογές. Οι περισσότερες οικογένειες χρησιμοποιούν την άδεια SIL Open Font License.

Γραμματοσειρά ΙστούΜεταβλητόςΕμπορικό ΟΚ*
Επίσκεψη

Fontshare (από ITF)

Δωρεάν

Ποιοτικές γραμματοσειρές προσφέρονται δωρεάν από την Indian Type Foundry. Καθαρές οικογένειες, εύκολη ενσωμάτωση CDN και πολλές μεταβλητές επιλογές.

Γραμματοσειρά ΙστούΜεταβλητός
Επίσκεψη

Γραμματοσειρά Σκίουρος

Δωρεάν εμπορικό

Επιμελημένος κατάλογος επικεντρωμένος σε γραμματοσειρές δωρεάν για εμπορική χρήση. Περιλαμβάνει μια δημιουργία γραμματοσειρών web για αυτο-φιλοξενία.

Εμπορικό ΟΚ*Γεννήτρια
Επίσκεψη

The League of Moveable Type

OFL

Κλασικό χυτήριο ανοιχτού κώδικα με διαχρονικές οικογένειες όπως το League Spartan και το Raleway. Εξαιρετικό για branding και editorial.

Ανοιχτού κώδικαΕπωνυμία
Επίσκεψη

Βελούδινο

OFL

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

ΕπίδειξηΠειραματικός
Επίσκεψη

Συλλογικός

OFL

Κοινοτικό χυτήριο που κυκλοφορεί δωρεάν γραμματοσειρές υψηλής ποιότητας υπό ανοικτές άδειες. Ισχυρές επιλογές σύνταξης και προβολής.

Ανοιχτού κώδικαΣύνταξης
Επίσκεψη

Ανοιχτό Χυτήριο

OFL

Επιμελημένο ευρετήριο γραμματοσειρών ανοιχτού κώδικα με εργαλεία δοκιμής και παρουσίαση με επίκεντρο το σχεδιασμό. Ιδανικό για να ανακαλύψετε φρέσκες οικογένειες.

Επίσκεψη

1001 γραμματοσειρές

Μικτές Άδειες

Μεγάλος κατάλογος με φίλτρα για δωρεάν εμπορική χρήση. Διαβάστε την άδεια ανά οικογένεια. πολλά είναι μόνο για προσωπική χρήση.

Επίσκεψη

DaFont

Προσωπική χρήση

Τεράστιο αρχείο το καλύτερο για προσωπικά έργα και έμπνευση. Οι άδειες διαφέρουν ευρέως. ελέγξτε κάθε σελίδα λήψης.

Επίσκεψη

Γραμματοσειρές εικονιδίων (Font Awesome, Material Icons, Remix Icon)

Δωρεάν Επίπεδα

Για εικονίδια διεπαφής χρήστη χρησιμοποιώντας γραμμή γραμματοσειράς. Εξετάστε τα σύγχρονα συστήματα εικονιδίων SVG, αλλά οι γραμματοσειρές εικονιδίων παραμένουν χρήσιμες για γρήγορες προσθήκες.

UICDN
Γραμματοσειρά φοβερή Υλικά εικονίδια Εικονίδιο Remix

Ζωντανή προεπισκόπηση και αποσπάσματα CSS

Μόνο τοπικά — δεν μεταφορτώθηκε τίποτα
The quick brown fox jumps over the lazy dog. 0123456789
γραμματοσειρά-οικογένεια: Inter, sans-serif; βάρος γραμματοσειράς: 600;

Σύγκριση δυνατοτήτων (Στιγμιότυπο)

Οι άδειες διαφέρουν ανάλογα με την οικογένεια
Τοποθεσία Ανοιχτού κώδικα Δωρεάν εμπορικό Μεταβλητές γραμματοσειρές CDN/Webfonts Σημειώσεις
Γραμματοσειρές GoogleΝαίΝαί*ΝαίΝαίΗ μεγαλύτερη βιβλιοθήκη, γρήγορο CDN
FontshareΜικτόςΝαίΠολοίΝαίΣύγχρονες οικογένειες
Γραμματοσειρά ΣκίουροςΜικτόςΝαί*ΜερικοίΓεννήτριαΕπιμέλεια για εμπορική χρήση
League of Moveable TypeΝαίΝαίΜερικοίΑυτο-οικοδεσπότηςΔιαχρονικά κλασικά
ΒελούδινοΝαίΝαίΜερικοίΑυτο-οικοδεσπότηςΠειραματική απεικόνιση
DaFontΟχιποικίλλειΛίγοιΟχιΙδανικό για προσωπικά έργα

Πώς να χρησιμοποιήσετε δωρεάν γραμματοσειρές στον Ιστό

  1. Ελέγξτε την άδεια: OFL και άλλες επιτρεπτές άδειες είναι οι καλύτερες για εμπορικά έργα. Ορισμένοι ιστότοποι αναφέρουν γραμματοσειρές μόνο για προσωπική χρήση.
  2. Επιλέξτε παράδοση: Σύνδεσμος CDN για ταχύτητα ή αυτο-φιλοξενία με @font-face για έλεγχο και ιδιωτικότητα.
  3. Προφορτώστε κρίσιμες γραμματοσειρές για το κείμενο του ήρωά σας, εάν το CLS σας απασχολεί. ορίστε εναλλακτικές στοίβες για να αποφύγετε τα φλας.
  4. Προτιμήστε μεταβλητές γραμματοσειρές όταν είναι διαθέσιμες για να μειώσετε τα αιτήματα και να λάβετε ευέλικτα βάρη.

Παράδειγμα CDN

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<style>
  body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
</style>

Παράδειγμα αυτο-οικοδεσπότη

@font-face{
  font-family: "MyFont";
  src: url("/fonts/MyFont-Variable.woff2") format("woff2");
  font-display: swap;
}
body{ font-family: "MyFont", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }

* Επαληθεύετε πάντα την άδεια χρήσης κάθε οικογένειας στον ιστότοπο προέλευσης.

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

Είναι οι γραμματοσειρές Google δωρεάν για εμπορική χρήση;

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

Πρέπει να χρησιμοποιήσω γραμματοσειρές εικονιδίων ή εικονίδια SVG;

Τα εικονίδια SVG είναι πιο ευέλικτα για σύγχρονες εφαρμογές. Οι γραμματοσειρές εικονιδίων παραμένουν χρήσιμες για γρήγορες ρυθμίσεις ή παλαιού τύπου αγωγούς.

Οι γραμματοσειρές Ιστού επηρεάζουν την ταχύτητα του ιστότοπου;

Ναί. Χρήση font-display: swap, υποσύνολο όπου είναι δυνατόν και περιορίστε τις οικογένειες και τα βάρη.

Ποια είναι η καλύτερη γραμματοσειρά γενικής χρήσης;

Τα Inter, Roboto και Source Sans 3 είναι ευέλικτα. Συνδυάστε με ένα σερίφ όπως το Merriweather ή το Playfair για επικεφαλίδες.