The Cat in the Hat Το SVG προσφέρει την ετικέτα. Ενώ λειτουργεί σαν ένα κανονικό σε HTML, δέχεται χαρακτηριστικά που ξεκλειδώνουν ισχυρές δυνατότητες διαμόρφωσης κειμένου.
Ένα από αυτά τα χαρακτηριστικά είναι textLength. Εάν το ρυθμίσουμε αυτό 100, τότε το κείμενο που τυλίγεται θα μετακινηθεί σε όλο το μήκος του κοντέινερ SVG.
Δείτε το Pen SVG Text Lockup - Βήμα 1 από τον Geoff Graham (@geoffgraham) στο CodePen.
Ένα άλλο από αυτά τα χαρακτηριστικά είναι lengthAdjust. Αυτό ισχύει μόνο όταν (ή ) έχει ένα σετ textLengthκαι χειρίζεται τον τρόπο με τον οποίο το κείμενο επεκτείνεται ή συμπιέζεται ώστε να ταιριάζει με αυτόν τον χώρο. Η προεπιλεγμένη τιμή είναι spacingπου διατηρεί τα σχήματα των γραμμάτων αλλά προσαρμόζει τα κενά μεταξύ των χαρακτήρων. Μπορούμε να χρησιμοποιήσουμε spacingAndGlyphsαντ 'αυτού και αυτό θα προσαρμόσει την επέκταση της συμπίεσης του σχήματος των χαρακτήρων, καθώς και όταν η φυσική απόσταση είναι αμήχανη.
Δείτε το Pen SVG Text Lockup - Βήμα 2 από τον Geoff Graham (@geoffgraham) στο CodePen.
Όπως , η ετικέτα αποδέχεται επίσης ένα font-sizeχαρακτηριστικό που κάνει ακριβώς όπως θα περίμενε κανείς: αλλάξτε το μέγεθος του κειμένου. Μπορούμε να το χρησιμοποιήσουμε για να κάνουμε προσαρμογές στο κείμενο όπου η αύξηση textLengthαφήνει πολύ ή πολύ λίγο χώρο και lengthAdjustπαραμορφώνει τους χαρακτήρες.
Σε συνδυασμό, αυτά τα τρία χαρακτηριστικά μας δίνουν τη δυνατότητα δημιουργίας κλειδωμάτων κειμένου. Δείτε τι έχουμε ως αποτέλεσμα του παραπάνω αποσπάσματος με επιπλέον CSS για επιπλέον στυλ:
Δείτε το Κλείδωμα κειμένου Pen SVG από τον Geoff Graham (@geoffgraham) στο CodePen.
Άλλες κλειδαριές
Έχουμε γράψει για κλειδώματα τύπου πριν:
Ένας τύπος κλειδώματος είναι ένας τυπογραφικός σχεδιασμός όπου οι λέξεις και οι χαρακτήρες διαμορφώνονται και τακτοποιούνται πολύ συγκεκριμένα. Όπως το σχέδιο είναι κυριολεκτικά κλειδωμένο στη θέση του.
Το SVG είναι ιδανικό για τέτοιου είδους πράγματα, λόγω του μεγέθους του. Το κείμενο μέσα στο SVG δεν αναδιαμορφώνεται όπως ο τύπος HTML, αλλά ζυγίζει με τον μοναδικό τρόπο που κάνει το SVG, το οποίο συχνά βρίσκεται στην τέλεια αναλογία διαστάσεων που σχεδιάστηκε (αν και μπορείτε να το ελέγξετε αυτό).
Αν λοιπόν σχεδιάσετε κάτι τέτοιο σε λογισμικό επεξεργασίας διανυσμάτων όπως το Adobe Illustrator:
Δείτε το Στυλό Παράδειγμα κλειδώματος κειμένου από τον Chris Coyier (@chriscoyier) στο CodePen.
Διαβάστε περισσότερα.