Μετατροπή TTF σε SVG

Αυτή η σελίδα μετατρέπει μια γραμματοσειρά TrueType σε γραμματοσειρά SVG: ένα αρχείο XML στο οποίο κάθε χαρακτήρας είναι ένα στοιχείο <glyph> με το περίγραμμά του γραμμένο ως δεδομένα διαδρομής SVG. Είναι χρήσιμο για εργαλεία icon font και προγράμματα επεξεργασίας γραμματοσειρών, αλλά δεν είναι το ίδιο με μια εικόνα του κειμένου σας.

ή σύρετε Αρχεία TTF, OTF, WOFF … εδώ ·

Έως 95 MB ανά αρχείο· Έως 20 αρχεία· Διαγραφή μετά από 30 λεπτά

Έξοδος

Μετατροπή σε

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

Χαρακτήρες

Διατήρηση χαρακτήρων

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

Απόδοση και web

Όνομα γραμματοσειράς

Όνομα οικογένειας

Αφήστε κενό για να διατηρηθεί το αρχικό. Με την μετονομασία μπορείτε να εγκαταστήσετε τη μετατραπείσα γραμματοσειρά δίπλα στην αρχική χωρίς σύγκρουση.

Όνομα στυλ

Π.χ. Regular, Bold, Italic. Αφήστε κενό για να διατηρηθεί το αρχικό όνομα στυλ.

Πώς να χρησιμοποιήσετε αυτό το εργαλείο

1
Ανεβάστε το TTF
Προσθέστε ένα ή περισσότερα αρχεία .ttf, έως 20 ανά παρτίδα και 95 MB το καθένα. Λειτουργούν τόσο οι γραμματοσειρές εικονιδίων όσο και οι γραμματοσειρές κειμένου.
2
Κρατήστε τη γραμματοσειρά SVG ως έξοδο
Η επιλογή Μετατροπή σε έχει οριστεί σε SVG font. Το hinting δεν ισχύει για έξοδο SVG, γι' αυτό η επιλογή εξαφανίζεται· το Όνομα οικογένειας στις Σύνθετες ρυθμίσεις εξακολουθεί να μετονομάζει τη γραμματοσειρά.
3
Μετατροπή σε SVG
Πατήστε Μετατροπή σε SVG και κατεβάστε το αρχείο .svg. Ανοίξτε το σε πρόγραμμα επεξεργασίας κειμένου, στο Inkscape ή στο FontForge για να δείτε τις διαδρομές των γλύφων.

Γραμματοσειρά SVG ή εικόνα SVG του κειμένου

Αν αναζητήσετε TTF σε SVG, θα βρείτε δύο διαφορετικούς στόχους ανακατεμένους. Ο ένας είναι η γραμματοσειρά SVG: η μορφή γραμματοσειράς που ορίστηκε στη Σύσταση SVG 1.0 του W3C το 2001, όπου ένα στοιχείο <font> περιέχει ένα <glyph> για κάθε χαρακτήρα, με τιμή Unicode, πλάτος προχώρησης και το περίγραμμα ως διαδρομή. Ο άλλος είναι μια εικόνα SVG με κάποιο κείμενο, τα γράμματα ενός λογοτύπου ή ενός ονόματος που έχουν ήδη διαμορφωθεί σε γραμμή και αποθηκευτεί ως σχήματα. Αυτός ο μετατροπέας παράγει το πρώτο είδος. Αν έχετε εικόνα λογοτύπου και όχι γραμματοσειρά, το PNG σε SVG την ιχνηλατεί σε διαδρομές.

Η μετατροπή ενός περιγράμματος TrueType σε δεδομένα διαδρομής SVG δεν χάνει τίποτα από το σχήμα. Οι διαδρομές SVG υποστηρίζουν τις ίδιες τετραγωνικές καμπύλες που χρησιμοποιεί το TrueType, οπότε κάθε περίγραμμα γράφεται όπως είναι. Δεν διατηρούνται όσα βρίσκονται γύρω από τα περιγράμματα: οι εντολές hinting, τα χαρακτηριστικά OpenType πέρα από το απλό kerning και οι δυαδικοί πίνακες που χρειάζονται τα λειτουργικά συστήματα για να εγκαταστήσουν μια γραμματοσειρά. Μια γραμματοσειρά SVG δεν μπορεί να εγκατασταθεί σε Windows ή macOS.

Πώς μοιάζει ένα αρχείο γραμματοσειράς SVG

Συντομευμένο παράδειγμα του κώδικα μιας γραμματοσειράς SVG

<svg xmlns="http://www.w3.org/2000/svg">
  <!-- γραμματοσειρά SVG με έναν γλύφο -->
  <defs>
    <font id="BrandSans" horiz-adv-x="1229">
      <font-face font-family="Brand Sans" units-per-em="2048" ascent="1638" descent="-410" />
      <glyph unicode="L" glyph-name="L" horiz-adv-x="1100" d="M180 0V1456H360V160H1040V0Z" />
    </font>
  </defs>
</svg>

Αυτό που δημιουργεί η σελίδα: ένα αρχείο, ένα <glyph> ανά χαρακτήρα, σε μονάδες γραμματοσειράς με τον άξονα y προς τα πάνω.

Ανοίγει σε FontForge, Inkscape και εργαλεία γραμματοσειρών εικονιδίων
Δεν εγκαθίσταται στον υπολογιστή
Δεν φορτώνεται από τα σημερινά Chrome, Edge ή Firefox

Ένα κανονικό OTF ή TTF με επιπλέον πίνακα SVG που περιέχει έγχρωμους γλύφους σε στρώσεις.

Εγκαθίσταται όπως κάθε γραμματοσειρά
Χρησιμοποιείται για emoji και πολύχρωμη τυπογραφία
Η υποστήριξη διαφέρει ανά εφαρμογή και browser

Από πού προήλθαν οι γραμματοσειρές SVG και τι απέγιναν

Το SVG 1.0 ορίζει το στοιχείο font: 2001
τελευταίο Safari iPhone που χρειαζόταν γραμματοσειρές SVG για το web: iOS 4.1
αφαιρεί τις γραμματοσειρές SVG το 2014: Chrome 38
αφαιρεί το κεφάλαιο των γραμματοσειρών: SVG 2

TTF

Γραμματοσειρά TrueType

Το TTF είναι η μορφή γραμματοσειράς TrueType που ανέπτυξε η Apple στα τέλη της δεκαετίας του 1980 και κυκλοφόρησε το 1991, πριν αδειοδοτηθεί στη Microsoft. Ορίζει τα περιγράμματα των γλύφων με τετραγωνικές καμπύλες και περιλαμβάνει εντολές hinting που κάνουν το κείμενο καθαρό στις οθόνες. Το TrueType υποστηρίζεται από κάθε λειτουργικό σύστημα επιτραπέζιου υπολογιστή, κάθε επεξεργαστή κειμένου και εφαρμογή σχεδίασης. Δεν διαθέτει ορισμένες προηγμένες τυπογραφικές δυνατότητες του OpenType και είναι μεγαλύτερο από τις μορφές γραμματοσειρών για τον ιστό.

Συμπίεση: Χωρίς απώλειες
Διαφάνεια: –
Κινούμενη εικόνα: –
Έτος εισαγωγής: 1991 · Apple

Μετατροπέας TTF

SVG

Scalable Vector Graphics

Το SVG είναι μορφή διανυσμάτων βασισμένη σε XML, που τυποποιήθηκε από το W3C το 2001. Αντί για pixel περιγράφει σχήματα, διαδρομές και κείμενο, οπότε παραμένει καθαρό σε κάθε μέγεθος και συνήθως είναι πολύ μικρό για λογότυπα και εικονίδια. Υποστηρίζει διαφάνεια, στυλ CSS, σενάρια και κινούμενα σχέδια, και κάθε πρόγραμμα περιήγησης το εμφανίζει εγγενώς. Το SVG δεν ενδείκνυται για φωτογραφίες και οι σύνθετες εικονογραφήσεις μπορεί να αργούν να αποδοθούν. Μπορείτε να το ανοίξετε και να το επεξεργαστείτε με Illustrator, Inkscape, Figma και προγράμματα περιήγησης.

Συμπίεση: –
Διαφάνεια: Ναι
Κινούμενη εικόνα: Ναι
Έτος εισαγωγής: 2001 · W3C

Μετατροπέας SVG

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

Συχνές ερωτήσεις για TTF σε SVG

Μπορώ να χρησιμοποιήσω σήμερα γραμματοσειρά SVG στο CSS @font-face;

Όχι στους περισσότερους browsers. Το Chrome αφαίρεσε την υποστήριξη γραμματοσειρών SVG στην έκδοση 38 το 2014, ενώ το Firefox και ο Internet Explorer δεν την πρόσθεσαν ποτέ. Για ιστότοπο, μετατρέψτε το TTF με το TTF σε WOFF2.

Γιατί οι γλύφοι εμφανίζονται ανάποδα όταν τους επικολλώ σε ένα σχέδιο;

Οι γραμματοσειρές SVG χρησιμοποιούν το δικό τους σύστημα συντεταγμένων, όπου ο άξονας y δείχνει προς τα πάνω από τη γραμμή βάσης, ενώ τα συνηθισμένα σχέδια SVG μετρούν το y προς τα κάτω από την κορυφή. Αναστρέψτε τη διαδρομή κατακόρυφα, για παράδειγμα με μετασχηματισμό scale(1,-1), και θα εμφανιστεί σωστά.

Πώς μετατρέπω κείμενο σε διαδρομές SVG για Cricut ή κόφτη λέιζερ;

Εγκαταστήστε το TTF, πληκτρολογήστε τις λέξεις σας στο Inkscape ή στο Illustrator και μετατρέψτε το κείμενο σε περιγράμματα: Path › Object to Path στο Inkscape, Type › Create Outlines στο Illustrator. Αποθηκεύστε το ως SVG. Μια γραμματοσειρά SVG περιέχει κάθε γράμμα χωριστά και δεν είναι διαμορφωμένη σε λέξεις.

Διατηρούν οι γραμματοσειρές SVG το kerning και τα συμπλέγματα (ligatures);

Μόνο εν μέρει. Η μορφή γραμματοσειράς SVG μπορεί να αποθηκεύσει ζεύγη kerning με στοιχεία hkern και γλύφους πολλών χαρακτήρων, αλλά δεν έχει αντίστοιχο των πινάκων λειτουργιών OpenType, όπως μικρά κεφαλαία, εναλλακτικά γλυφικά ή συμφραζόμενους κανόνες. Κρατήστε το TTF αν τα χρειάζεστε.

Είναι χρήσιμη η έξοδος γραμματοσειράς SVG για icon fonts;

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