Μετατροπή TTF σε WOFF2
Η φιλοξενία μιας γραμματοσειράς στον δικό σας διακομιστή ξεκινά εδώ: το WOFF2 είναι η μορφή που κατεβάζει πρώτη κάθε σύγχρονο πρόγραμμα περιήγησης και το μικρότερο περιτύλιγμα για τα δεδομένα TrueType που ήδη έχετε. Η σελίδα γράφει επίσης τον κανόνα CSS που τη φορτώνει.
Μετατροπέας γραμματοσειρών
ή σύρετε Αρχεία TTF, OTF, WOFF … εδώ ·
Έως 95 MB ανά αρχείο· Έως 20 αρχεία· Διαγραφή μετά από 30 λεπτά
Τα αρχεία επεξεργάζονται στους διακομιστές μας και διαγράφονται μετά από 30 λεπτά.
Η αφαίρεση των γραφών που δεν χρησιμοποιείτε μπορεί να μειώσει μια γραμματοσειρά ιστού από εκατοντάδες KB σε λιγότερα από 30 KB. Κρατήστε όλους τους χαρακτήρες για γραμματοσειρές που εγκαθιστάτε σε υπολογιστή.
Επικολλήστε το κείμενο ή τους χαρακτήρες που πρέπει να καλύπτει η γραμματοσειρά, π.χ. τη λέξη ενός λογότυπου ή έναν τίτλο. Όλα τα υπόλοιπα αφαιρούνται.
Τα hints οξύνουν το μικρό κείμενο σε οθόνες Windows. Η αφαίρεσή τους εξοικονομεί συχνά 10–30% σε γραμματοσειρές ιστού· το auto-hint τα προσθέτει σε γραμματοσειρές που δεν έχουν.
Αφήστε κενό για να διατηρηθεί το αρχικό. Με την μετονομασία μπορείτε να εγκαταστήσετε τη μετατραπείσα γραμματοσειρά δίπλα στην αρχική χωρίς σύγκρουση.
Π.χ. Regular, Bold, Italic. Αφήστε κενό για να διατηρηθεί το αρχικό όνομα στυλ.
Πώς να χρησιμοποιήσετε αυτό το εργαλείο
- 1
Ανεβάστε τα αρχεία TTF
Προσθέστε κάθε βάρος και στυλ που σκοπεύετε να χρησιμοποιήσετε, έως 20 αρχεία των 95 MB το καθένα. Λειτουργούν και τα variable TTF, διατηρώντας τους άξονές τους.
- 2
Αφήστε ενεργό το CSS και δημιουργήστε υποσύνολο αν μπορείτε
Η επιλογή Συμπερίληψη CSS @font-face είναι ήδη επιλεγμένη. Στις Σύνθετες ρυθμίσεις, ορίστε το Διατήρηση χαρακτήρων σε Basic Latin ή Latin + τόνοι αν ο ιστότοπός σας είναι σε δυτική γλώσσα και σκεφτείτε να ορίσετε το Hinting σε Remove.
- 3
Μετατροπή σε WOFF2
Πατήστε Μετατροπή σε WOFF2 και κατεβάστε τις γραμματοσειρές μαζί με το αρχείο .css. Ανεβάστε και τα δύο στον ιστότοπό σας και συνδέστε το stylesheet ή επικολλήστε τον κανόνα στο δικό σας.
Πώς μετατρέπω TTF σε WOFF2 για τον ιστότοπό μου;
Ανεβάστε το .ttf, αφήστε επιλεγμένο το Συμπερίληψη CSS @font-face και πατήστε Μετατροπή σε WOFF2. Θα λάβετε το αρχείο .woff2 και ένα αρχείο .css με κανόνα @font-face που δείχνει σε αυτό.
Γιατί το WOFF2 είναι η μορφή γραμματοσειράς web που αξίζει να χρησιμοποιείτε
Ένα TTF είναι ασυμπίεστα δεδομένα πινάκων: περιγράμματα, μετρικές, kerning, ονόματα. Το WOFF2, που δημοσιεύτηκε ως Σύσταση του W3C το 2018, κρατά ακριβώς αυτούς τους πίνακες αλλά τους περνά από Brotli, τον αλγόριθμο συμπίεσης που κυκλοφόρησε η Google το 2015, αφού πρώτα αναδιοργανώσει τα περιγράμματα των γλύφων ώστε να συμπιέζονται καλύτερα. Οι δοκιμές της ίδιας της Google βρήκαν το WOFF2 περίπου 30% μικρότερο από την παλαιότερη μορφή WOFF κατά μέσο όρο, και ο browser επαναφέρει τα αρχικά δεδομένα της γραμματοσειράς μετά τη λήψη, άρα τα σχήματα των γραμμάτων δεν αλλάζουν.
Οι γραμματοσειρές μπλοκάρουν την απόδοση της σελίδας, γι' αυτό το μέγεθός τους μετράει περισσότερο απ' όσο δείχνουν τα kilobyte. Μέχρι να φτάσει μια γραμματοσειρά web, ο browser είτε κρύβει το κείμενο είτε εμφανίζει εφεδρική, και μια καθυστερημένη αλλαγή μπορεί να μετακινήσει τη διάταξη. Τα μικρότερα αρχεία στενεύουν αυτό το παράθυρο, και δύο επιλογές εδώ το στενεύουν ακόμη περισσότερο: το Διατήρηση χαρακτήρων αφαιρεί γλύφους που οι σελίδες σας δεν εμφανίζουν ποτέ και το Hinting σε Remove αφαιρεί οδηγίες που τα κινητά και οι οθόνες υψηλής πυκνότητας αγνοούν ούτως ή άλλως. Κρατήστε τα πρωτότυπα TTF για χρήση στον υπολογιστή· το WOFF2 σε TTF μπορεί να αποσυσκευάσει αργότερα μια γραμματοσειρά web, αλλά δεν μπορεί να επαναφέρει γλύφους που αφαιρέθηκαν από ένα υποσύνολο.
Μέγεθος αρχείου TTF και WOFF2
TTF, πλήρες σύνολο χαρακτήρων
100%
Ασυμπίεστοι πίνακες γραμματοσειράς, όπως εγκαθίσταται σε υπολογιστή
WOFF2, υποσύνολο Basic Latin
συχνά 10–25%
Συμπίεση Brotli και λιγότεροι γλύφοι· διαφέρει ανά γραμματοσειρά
Ο κανόνας @font-face για γραμματοσειρά WOFF2
@font-face {
font-family: "Brand Sans";
src: url("/fonts/brand-sans-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF;
}Υποστήριξη WOFF2 στα προγράμματα περιήγησης, ανά έκδοση
2014
Chrome 36
Ο browser της Google είναι ο πρώτος που αποκωδικοποιεί WOFF2 από προεπιλογή.
2015
Firefox 39
Η Mozilla ενεργοποιεί από προεπιλογή την αποκωδικοποίηση WOFF2.
2016
Edge 14
Ο αρχικός Edge της Microsoft προσθέτει WOFF2 με το Windows 10 Anniversary Update.
2018
Σύσταση του W3C
Η προδιαγραφή οριστικοποιείται· μέχρι τότε και το Safari σε macOS και iOS αποκωδικοποιεί WOFF2.
TTF
Γραμματοσειρά TrueType
Το TTF είναι η μορφή γραμματοσειράς TrueType που ανέπτυξε η Apple στα τέλη της δεκαετίας του 1980 και κυκλοφόρησε το 1991, πριν αδειοδοτηθεί στη Microsoft. Ορίζει τα περιγράμματα των γλύφων με τετραγωνικές καμπύλες και περιλαμβάνει εντολές hinting που κάνουν το κείμενο καθαρό στις οθόνες. Το TrueType υποστηρίζεται από κάθε λειτουργικό σύστημα επιτραπέζιου υπολογιστή, κάθε επεξεργαστή κειμένου και εφαρμογή σχεδίασης. Δεν διαθέτει ορισμένες προηγμένες τυπογραφικές δυνατότητες του OpenType και είναι μεγαλύτερο από τις μορφές γραμματοσειρών για τον ιστό.
- Συμπίεση
- Χωρίς απώλειες
- Διαφάνεια
- –
- Κινούμενη εικόνα
- –
- Έτος εισαγωγής
- 1991 · Apple
WOFF2
Web Open Font Format 2
Το WOFF2 είναι η δεύτερη έκδοση του Web Open Font Format, βασισμένη στη συμπίεση Brotli της Google και δημοσιευμένη ως Σύσταση του W3C το 2018. Τα αρχεία είναι περίπου 30% μικρότερα από το WOFF, κάτι που βοηθά τις σελίδες να φορτώνουν ταχύτερα. Κάθε σύγχρονο πρόγραμμα περιήγησης υποστηρίζει το WOFF2 και είναι η προτεινόμενη μορφή για γραμματοσειρές ιστού. Τα λειτουργικά συστήματα υπολογιστών και οι εφαρμογές σχεδίασης δεν μπορούν να το εγκαταστήσουν απευθείας.
- Συμπίεση
- Χωρίς απώλειες
- Διαφάνεια
- –
- Κινούμενη εικόνα
- –
- Έτος εισαγωγής
- 2018 · W3C (Google)
Η μετατροπή TTF σε WOFF2 πακετάρει μια γραμματοσειρά υπολογιστή στο συμπιεσμένο με Brotli κοντέινερ που προτιμούν οι browsers, ώστε οι ίδιοι γλύφοι να φτάνουν στους επισκέπτες με λιγότερα byte· η αντίστροφη σελίδα υπάρχει για όσους πρέπει να εγκαταστήσουν μια γραμματοσειρά που βρήκαν στο web.
Συχνές ερωτήσεις για τη μετατροπή TTF σε WOFF2
Χρειάζομαι ακόμη εναλλακτικό TTF ή WOFF δίπλα στο WOFF2;
Για δημόσιους ιστότοπους σήμερα, συνήθως όχι. Οι Chrome, Edge, Firefox και Safari διαβάζουν WOFF2 εδώ και χρόνια, και οι λίγοι browsers που δεν το κάνουν, όπως ο Internet Explorer 11, σπάνια αξίζουν ένα επιπλέον αρχείο. Προσθέστε αρχείο από το TTF σε WOFF ως δεύτερη εγγραφή src μόνο αν τα analytics σας δείχνουν τέτοιους επισκέπτες.
Γιατί η γραμματοσειρά WOFF2 ξεπερνά ακόμη τα 100 KB;
Η συμπίεση μειώνει μόνο τον τρόπο αποθήκευσης των γλύφων, όχι τον αριθμό τους. Μια γραμματοσειρά που καλύπτει λατινικά, κυριλλικά, ελληνικά και βιετναμέζικα περιέχει όλα αυτά. Η δημιουργία υποσυνόλου με τα συστήματα γραφής που πραγματικά εμφανίζετε φέρνει μια γραμματοσειρά κειμένου στις δεκάδες kilobyte.
Τι κάνει το font-display: swap;
Λέει στον browser να εμφανίσει αμέσως το κείμενο με εφεδρική γραμματοσειρά και να αλλάξει στη γραμματοσειρά web μόλις φτάσει, αντί να κρύβει το κείμενο όσο γίνεται η λήψη. Προσθέστε το στον κανόνα @font-face όπως στο παραπάνω παράδειγμα ή χρησιμοποιήστε optional αν προτιμάτε να αποφύγετε μια καθυστερημένη αλλαγή σε αργές συνδέσεις.
Μπορώ να μετατρέψω ένα TTF του Google Fonts σε WOFF2 και να το φιλοξενήσω μόνος μου;
Ναι. Οι οικογένειες του Google Fonts διατίθενται με την άδεια SIL Open Font License ή Apache License, που επιτρέπουν και τη μετατροπή και τη φιλοξενία στον δικό σας διακομιστή. Η φιλοξενία του αρχείου από εσάς αποφεύγει επίσης ένα αίτημα προς διακομιστή τρίτου.
Λειτουργεί το WOFF2 στα ενημερωτικά δελτία μέσω email;
Μόνο σε ορισμένους πελάτες. Το Apple Mail και το iOS Mail φορτώνουν γραμματοσειρές web μέσω @font-face, ενώ το Gmail και οι περισσότερες εκδόσεις του Outlook τις αγνοούν και εμφανίζουν την εφεδρική γραμματοσειρά. Να δηλώνετε πάντα μια ασφαλή γραμματοσειρά συστήματος στη λίστα γραμματοσειρών ενός email.