Πώς να φτιάξετε το δικό σας εικονίδιο Webfont
Σε αυτό το άρθρο, θα εξετάσω την επιστήμη πίσω από την παραγωγή επιτυχημένων εικονιδίων UI πριν σας διδάξει πώς να φτιάξετε τη δική σας ενσωματωμένη γραμματοσειρά εικονιδίων .
Από το σχεδιασμό των μεμονωμένων εικονιδίων για τη μετατροπή τους @font-face την ενσωμάτωσή τους και ακόμη και τη χορήγηση αδειών για διανομή, θα χρησιμοποιούμε μόνο δωρεάν λογισμικό και υπηρεσίες online. Τι συμβαίνει αυτό; Δεν θα χρειαστεί να βασίζεστε σε καμία από τις εσωτερικές γνώσεις που απαιτούνται για την πραγματοποίηση επιτυχημένων αλφαριθμητικών γραμματοσειρών. απλά ένα μάτι για το σχεδιασμό πράγματα που μπορεί να φαίνονται πολύ, πολύ μικρά.
Τελικά, θα πρέπει να πάτε μακριά με μια διαδικασία για την κατασκευή στοιχείων σχεδιασμού που εκτείνεται πολύ πέρα από την κατασκευή απλών εικονιδίων.
Πριν συνεχίσουμε, πρέπει να πούμε κάτι για το τι ακριβώς προσπαθούμε achieve χρησιμοποιώντας πρώτα τα εικονίδια στα σχέδιά μας και τι κάνει ένα εικονίδιο πιο επιτυχημένο από το επόμενο. Θεωρία πριν από την εφαρμογή. Για να γίνει αυτό, πρέπει να εξετάσουμε το ρόλο του εικονιδίου ως μέρος της σημειολογίας.
Τι κάνει ένα καλό εικονίδιο;
Ημικρανία , με την ευρύτερη έννοια, είναι η μελέτη των σηματοδοτικών συστημάτων , ο τρόπος με τον οποίο συμβάλλουμε στη διαμόρφωση και τη συντήρησή τους, καθώς και ο αντίκτυπός τους στην κατανόηση του κόσμου μέσα και έξω από εμάς.
Κάθε φορά που θεωρείτε ένα μέρος του έργου σας από την οπτική του τι είναι αυτό σημαίνει - τι λέει στο ακροατήριό σας ή ποιες έννοιες τους θυμάται - σκέφτεστε το σχεδιασμό σας ως σημειωτή. Αν και η σημειολογία, όπως η γλωσσολογία, καλύπτει τη γλώσσα, υπάρχουν πολλά πράγματα σε έναν ιστότοπο που λέει κάτι χωρίς λέξεις, όπως τα χρώματα, τα χαρακτικά και τα σχήματα που ονομάζουμε εικονίδια . Κάποιος πρέπει να είναι επιφυλακτικός γιατί αυτά που λένε αυτά έχουν μια ισχυρή πολιτιστική διάσταση. Στην Κίνα , το κόκκινο χρώμα μπορεί να σημαίνει καλή τύχη ενώ σε πολλές δυτικές χώρες χρησιμοποιείται για να δηλώσει τον κίνδυνο.
(Βασίζεται σε μια εικόνα από το καφέ ),
Ο όρος "εικονίδιο" έχει ιδιαίτερη σημασία στον τομέα της σημειολογίας. Μια εικόνα είναι ένα τεχνούργημα που υποδηλώνει κάτι που μοιάζει με αυτό. Πάρτε, για παράδειγμα, ένα εικονίδιο καρφίτσας χάρτη . Ως σχήμα που μοιάζει με μια "πραγματική" καρφίτσα χάρτη, είναι σε θέση να το σημάνει. Με τη σειρά του, η πραγματική καρφίτσα χάρτη φέρνει στο νου όλα τα είδη των νόημα έννοιες . Μεταξύ αυτών είναι οι αφηρημένες έννοιες όπως η τοποθεσία και οι λιγότερο αφηρημένες έννοιες, όπως ο χάρτης στον οποίο μπορεί να ανήκει ο πείρος.
Ορισμένα λεγόμενα εικονίδια δεν είναι πραγματικά εικονικά. Το πανταχού παρόν εικονίδιο RSS , με την τελεία του και τα δύο τμήματα του ομόκεντρου κύκλου, δεν μοιάζει περισσότερο με syndication από ό, τι οι λέξεις "Really Simple Syndication" μοιάζουν. Η διαμόρφωση των σχημάτων που συνθέτουν το εικονίδιο RSS σημαίνει RSS μόνο από τη σύμβαση. συμφωνήσαμε ότι αυτό είναι αυτό που είναι για. Ένα εικονίδιο RSS ονομάζεται πιο σωστά ένα σύμβολο RSS .
Μέχρι τώρα, ελπίζω ότι έχουμε διαπιστώσει ότι τα επιτυχημένα εικονίδια ιστού θα πρέπει να πληρούν ένα ή και τα δύο από τα ακόλουθα δύο κριτήρια:
- Μια ισχυρή ομοιότητα με ένα πραγματικό πράγμα, για παράδειγμα ένα εικονίδιο εκτύπωσης που μοιάζει με έναν πραγματικό εκτυπωτή
- Δημιουργία και ως εκ τούτου οικειότητα ως αναγνωρίσιμο σύμβολο μέσα στο σύστημα σημάτων
Icon γραμματοσειρές κερδίζοντας δημοτικότητα
Τα εικονίδια θεωρούνται από καιρό ως ένας καλός τρόπος για να βελτιώσουν τα σχέδια UI επειδή παρέχουν μια οπτική στενογραφία που βοηθά στην κατανόηση ενός κατά τα λοιπά καθαρά κειμένου μηνύματος. Φύλλα εικόνων εικονιδίων κυκλοφορούν σε όλη την κοινότητα σχεδιασμού ιστοσελίδων όπως το λαθρεμπόριο, κάθε σετ που υπόσχεται να κάνει το σχέδιο σας πιο λαμπερό, πιο δελεαστικό και πιο clickable από το τελευταίο.
Σε σύγκριση με τις εικόνες, η ιδέα της χρήσης ενσωματωμένων γραμματοσειρών για εικόνες είναι μια σχετικά νέα ιδέα. Ωστόσο, είναι ένα που κερδίζει σημαντική έλξη λόγω των πολλών εγγενών πλεονεκτημάτων πάνω από την εικόνα (ή background-image ). Εγώ έγραψε για μερικά από αυτά τα πλεονεκτήματα στο μικρό blog μου στις αρχές Σεπτεμβρίου. Chris Coyier προφανώς είχε μια παρόμοια ιδέα, εισάγοντας την ιδέα σε ένα ( πολύ, πολύ ) μεγαλύτερο ακροατήριο εβδομάδες αργότερα. Με βάση τις δύο θέσεις και άλλα, έχω συντάξει αυτή τη λεπτομερή λίστα χαρακτηριστικών:
- Αλλάζουν εύκολα χωρίς να υποβαθμίζονται (επειδή είναι ουσιαστικά φορείς)
- Η αναζωογόνηση του εικονιδίου είναι τόσο ασήμαντη όσο το κείμενο επαναμορφοποίησης. Για παράδειγμα,
color: orangeγια ένα εικονίδιο RSS - Πολλά εικονίδια ομαδοποιούνται σε ένα αρχείο, γεγονός που απαιτεί μόνο ένα αίτημα http
- Όπως επισημαίνει ο Chris, είναι σχήματα που έχουν διαφανείς "knockouts" που λειτουργούν σε browsers ήδη από τον IE6 (σε αντίθεση με τα alpha PNGs)
- Για τα εικονίδια που πρέπει να εμφανίζονται δίπλα στο κείμενο, η ευθυγράμμιση και η περιτύλιξη είναι μη-ζητήματα (επειδή είναι κείμενο)
- Μπορείτε να εφαρμόσετε τα εφέ CSS3 μέσω
text-shadowκαιbackground-clip:textπου σέβονται το σχήμα του glyph - Σε αντίθεση με το SVG, η υποστήριξη πολλαπλών προγραμμάτων περιήγησης είναι εύκολη
Προβλήματα
Σύμφωνα με τα λόγια του Chris, η χρήση γραμματοσειρών για εικόνες είναι μια καλή ιδέα, σας λέω
. Ωστόσο, το status quo σχετικά με τη χρήση της γραμματοσειράς εικονιδίων δεν είναι ιδανικό. Πρώτον, οι περισσότερες διαθέσιμες γραμματοσειρές ποιότητας, που ονομάζονται πράγματα όπως Pictos , Φίκο , Κλέπτο, Cheetos, Ponyo και Sailor Moon (Μπορεί να έχω πάρει κάποια από αυτά λάθος), πληρώνονται για τις γραμματοσειρές. Στην πράξη αυτό σημαίνει ότι υπάρχουν δύο προβλήματα :
- Ίσως χρειαστεί να μοιράζεστε χρήματα
- Είτε πρέπει να μοιράζεστε χρήματα είτε όχι, θα πρέπει να αποδεχτείτε το βρώμικο έργο του άλλου
Εκτός από τα αυτοματοποιημένα προγράμματα ανίχνευσης, υποθέτω ότι είναι ως επί το πλείστον σχεδιαστές ιστοσελίδων που θα διαβάζουν αυτό το άρθρο. Είμαι ο ίδιος σχεδιαστής και δεν νομίζω ότι είμαι μόνος που αμαυρώνω την ιδέα ότι πρέπει να θέσω σε κίνδυνο τον δικό μου σχεδιασμό βασιζόμενοι σε χειροτεχνήματα κάποιου άλλου. Φυσικά, είμαι ακόμα λιγότερο ερωτευμένος με τη σκέψη να πληρώσω για το προνόμιο. Ξέρω τι εικόνες θέλω να χρησιμοποιήσω και ξέρω ακριβώς πώς θέλω να τα προσαρμόσω στο γενικό σχεδιασμό μου. Θέλω τον έλεγχο .
Μετά από κάποια έρευνα, ήμουν τελικά εισάγονται στις δυνατότητες του Inkscape 's SVG Font Editor . Με λίγη πρακτική που χρησιμοποίησε το Inkscape και τη βοήθεια ενός online μετατροπέα για να μετατρέψω τη γραμματοσειρά μου SVG σε TTF, ήμουν σε θέση να κάνω "Heydings". Αυτή η γραμματοσειρά περιλαμβάνεται τώρα Ο κατάλογος του Σιμουράι (όπως συνδέεται με το άρθρο του Coyier). Δεν προσπαθώ να σας πουλήσω τη γραμματοσειρά μου (είναι δωρεάν εν πάση περιπτώσει) αλλά νομίζω ότι κάνει μια αρκετά καλή απόδειξη της έννοιας :
Δημιουργία εικονιδίων με το Inkscape
Ρύθμιση του Inkscape
Ας ξεκινήσουμε από λήψης και την εγκατάσταση του Inkscape. Θα πρέπει επίσης να χρησιμοποιήσετε το πρότυπο εκκίνησης γραμματοσειράς εικονιδίων που βρίσκεται στο φάκελο πόρων του αυτό το αποθετήριο GitHub (περισσότερα για αυτό το έργο GitHub αργότερα). Αφού ανοίξετε αυτό το αρχείο στη νέα σας εγκατάσταση Inkscape, θα πρέπει να ρυθμίσετε το χώρο εργασίας σας ανοίγοντας τα ακόλουθα παράθυρα από το κύριο μενού:
- ΑΝΤΙΚΕΙΜΕΝΟ → ΠΛΗΡΩΣΤΕ ΚΑΙ ΠΑΡΕΧΟΥΜΕ
- ΑΝΤΙΚΕΙΜΕΝΟ → ΔΙΑΓΡΑΦΗ ΚΑΙ ΔΙΑΝΟΜΗ
- ΚΕΙΜΕΝΟ → ΕΓΓΡΑΦΗ ΕΓΓΡΑΦΩΝ SVG
Στο παράθυρο Editor της γραμματοσειράς SVG, κάντε κλικ στο "Γραμματοσειρά 1" κάτω από το "Γραμματοσειρά". Ο χώρος εργασίας σας θα πρέπει τώρα να φαίνεται σαν κάτι τέτοιο:
Αξίζει να επισημανθεί ότι το βασική γραμμή Ο οδηγός δεν είναι κάτω από το κατώτερο όριο του καμβά κατά λάθος: Για λόγους που είναι περισσότερο γνωστοί σε κάποιον άλλο, τα εικονίδια σας θα πρέπει να υπερβαίνουν ελαφρώς το κατώτατο σημείο του καμβά εάν επιθυμείτε να μοιράζονται την ίδια γραμμή αναφοράς με τις γειτονικές γραμματοσειρές. Έχω δοκιμάσει αυτό με τη Γεωργία, Arial και μια σειρά γραμματοσειρών web.
Κάνοντας το πρώτο σας γλύφω
Για να ορίσετε το glyph, κάντε κλικ στην καρτέλα Glyphs στο παράθυρο Editor του SVG Font και , στη συνέχεια, κάντε κλικ στο κουμπί Add Glyph στο κάτω τμήμα του παραθύρου. Δεν είναι άμεσα σαφές στην πρώτη επιθεώρηση, αλλά αν κάνετε κλικ στο glyph ("Glyph 1") θα εμφανιστεί ένα πεδίο που σας επιτρέπει να εισάγετε τον χαρακτήρα στον οποίο θέλετε να αντιστοιχίσετε το εικονίδιο σας. Πρώτα απ 'όλα θα κάνουμε ένα απλό σχήμα αστεριού, γι' αυτό προτείνουμε να εισάγετε τους χαρακτήρες "s", "S" ή "*":
Τώρα που έχουμε ορίσει τον αντίστοιχο χαρακτήρα του glyph, πρέπει να φτιάξουμε το ίδιο το glyph. Από τη στιγμή που δημιουργούμε ένα αστέρι αυτή τη φορά, θα πρέπει να επιλέξετε το χρήσιμο εργαλείο Stars and Polygons της Inkscape από την αριστερή γραμμή εργαλείων και να σχεδιάσετε ένα αστέρι στον καμβά. Θα παρατηρήσετε ότι αυτό το εργαλείο συνοδεύεται από επιλογές που σας επιτρέπουν να αλλάξετε την εμφάνιση του αστεριού. Στο παράδειγμά μου, έχω επιλέξει 5 γωνίες, αναλογία ακτίνων 0,5 και στρογγυλεμένη τιμή 0,1.
Τοποθετήστε το αστέρι στο κέντρο οριζόντια χρησιμοποιώντας τον πίνακα "Align and Align" (ο οποίος μπορεί να είναι κρυμμένος κάτω από τον επεξεργαστή γραμματοσειρών SVG ) και σύρετε το σχήμα προς τα κάτω για να καλύψετε τη γραμμή βάσης. Με το πλέγμα απενεργοποιημένο, ο καμβάς θα πρέπει να φαίνεται ως εξής:
Τα glyphs στη γραμματοσειρά εικονιδίων μας είναι απλά σχήματα. σχήματα χωρίς χρώματα, στρώματα ή κλίσεις. Επομένως, για να καταστήσουμε το αστέρι μας νόμιμο υποψήφιο για τη γραμματοσειρά μας, πρέπει να το μετατρέψουμε από ένα αντικείμενο σε σχήμα που βασίζεται σε διαδρομές. Για να το κάνετε αυτό, επιλέξτε το αστέρι και επιλέξτε PATH → OBJECT TO PATH από το κύριο μενού. Τώρα, με το αστέρι που επιλέξατε, μπορούμε να μεταβούμε στον επεξεργαστή γραμματοσειράς SVG , να επισημάνουμε το εφαρμόσιμο glyph και να πατήσουμε το κουμπί Get curves από το κουμπί επιλογής :
Όταν εισάγετε το "s" στο πεδίο " Κείμενο δείγματος ", το αστέρι σας θα εμφανιστεί τώρα ως προεπισκόπηση, όπως π.χ.:
Δημιουργία πολύπλοκων εικονιδίων
Τώρα έχετε κάνει το πρώτο σας κλιμακωτό γράφημα γραμματοσειράς SVG. Χρησιμοποιώντας επιλογές από το παράθυρο πλήρωσης και περιγράμματος , την επεξεργασία κόμβων διαδρομής και το συνδυασμό αντικειμένων και κτυπήματος, θα είστε σε θέση να κάνετε πολύ πιο φιλόδοξα σχέδια για εικονίδια. Δεν θέλω να πάω σε ένα πλήρες σεμινάριο Inkscape επειδή έχουμε πολλά περισσότερα για να καλύψουμε, αλλά ακολουθώντας αυτούς τους απλούς κανόνες θα σας αντέξει σε καλή θέση:
- Προσέξτε να χρησιμοποιείτε μαύρα εγκεφαλικά επεισόδια και γεμίζει, αν μόνο για να σας υπενθυμίσω ότι τα εικονίδια είναι απλώς σχήματα, όχι πολύπλοκα διανυσματικά γραφικά. Χρωματίζοντας το εικονίδιο είναι εφικτό στο τελικό προϊόν χρησιμοποιώντας το CSS.
- Όλα τα αντικείμενα και οι εγκεφαλικά επεισόδια (γραμμές) πρέπει να μετατραπούν σε μονοπάτια με τη χρήση είτε PATH → OBJECT TO PATH είτε PATH → STROKE TO PATH
- Τα πολλαπλά αντικείμενα και / ή τα εγκεφαλικά επεισόδια που χρησιμοποιούνται για να σχηματίσουν ένα σύμβολο εικονιδίου πρέπει να συνδυαστούν μεταξύ τους χρησιμοποιώντας το PATH → COMBINE (ή, σε ορισμένες περιπτώσεις, το PATH → UNION)
- Για να κόψετε τα σχήματα από τα σχήματα (όπως με τη χρήση ενός κόφτη μπισκότων) τοποθετήστε το σχήμα που θα δημιουργήσει το "knockout" πάνω στο κύριο σχήμα, επιλέξτε και τα δύο και επιλέξτε PATH → DIFFERENCE. Οι λευκές περιοχές σε μαύρο που μοιάζουν με "knockouts" δεν θα αρκούν, όπως θα ανακαλύψετε όταν χτυπήσετε Get καμπύλες από την επιλογή Δείτε τον κανόνα 1.
Προετοιμασία της γραμματοσειράς σας για ενσωμάτωση
Φανταστείτε ότι έχετε προχωρήσει για να δημιουργήσετε μια σειρά από χρήσιμα εικονίδια για τη γραμματοσειρά σας επαναλαμβάνοντας τη μέθοδο αναπαραγωγής glyph που μόλις περιγράψαμε και αποθηκεύσατε το αρχείο ως myicons.svg . Τώρα, θα θέλετε να προετοιμάσετε αυτήν τη βιβλιοθήκη εικονιδίων για χρήση σε ιστοσελίδες.
Μετατροπή του SVG σε TTF
Το πρώτο μέτρο που πρέπει να πάρετε είναι να μετατρέψετε το @font-face απαιτήσεις. Οι υπηρεσίες online που σας επιτρέπουν να μετατρέψετε τις γραμματοσειρές μεταξύ των μορφών περιλαμβάνουν http://onlinefontconverter.com/ , http://www.fontconverter.org/ και http://www.font2web.com/ . Το δικό μου αγαπημένο, ωστόσο, είναι http://www.freefontconverter.com/ γιατί δεν παίρνω σε ουρά και ποτέ δεν το ξέρω να επιστρέψει τυχόν δυσλειτουργίες.
Δεν θα σας πατρίσω εξηγώντας πώς να χρησιμοποιήσετε αυτόν τον πόρο. Το διαδοχικό πεδίο φόρτωσης αρχείου, επιλέξτε στοιχείο και το γιγαντιαίο κουμπί Μετατροπή μιλούν από μόνοι τους, πραγματικά.
Επεξεργασία των πληροφοριών meta της γραμματοσειράς
Τώρα που έχετε το TTF στο χέρι σας, συνιστούμε να επεξεργαστείτε τα δημιουργούμενα μεταδεδομένα . Η μετονομασία, η απόδοση και η περιγραφή της γραμματοσειράς ικανοποιούν την ικανοποίησή σας και την καθιστά έτοιμη για εγκατάσταση, ενσωμάτωση και διανομή . Είναι επίσης ένας τρόπος να δείξετε ότι η γραμματοσειρά είναι δική σας δουλειά. Οι αναγνώστες που εκτελούν Windows έχουν την επιλογή να χρησιμοποιήσουν το παραπλανητικά μεγάλο ήχο Ο επεξεργαστής ιδιοτήτων γραμματοσειρών της Microsoft ή τις ελεύθερες για x ημέρες Τυπογράφος . Για τους χρήστες της Apple και του Linux, ζητώ από αυτούς να είναι καλύτερα ενημερωμένοι από ό, τι είμαι για να βοηθήσω στα σχόλια.
Ο κλασσικός αλλά λειτουργικός επεξεργαστής ιδιοτήτων γραμματοσειρών
Σημαντική σημείωση: Παρόλο που ο Επεξεργαστής ιδιοτήτων γραμματοσειράς της Microsoft σας επιτρέπει να προσθέσετε πληροφορίες συγγραφέα, περιγραφής και άδειας χρήσης, δεν φαίνεται να σας επιτρέπουν να επεξεργαστείτε βασικά δεδομένα, όπως το όνομα γραμματοσειράς και το όνομα postscript . Αυτά τα πεδία είναι απενεργοποιημένα. Αν χρησιμοποιείτε αυτό το συγκεκριμένο λογισμικό, θα πρέπει να εντοπίσετε και να επεξεργαστείτε τις απαγορευμένες τιμές στον κώδικα SVG πριν από τη μετατροπή του TTF. Ανοίξτε το αρχικό SVG στον αγαπημένο σας επεξεργαστή κειμένου (χρησιμοποιώ Σημειωματάριο ++ ) και επεξεργαστείτε τα εξής:
Όνομα γραμματοσειράς: Βρέθηκε στην ετικέτα, font-family Χαρακτηριστικό
Postscript Name: Βρέθηκε στην ετικέτα, id Χαρακτηριστικό
Περιγραφή: Θα πρέπει να προσθέσετε μια περιγραφή (συγγραφέας, άδεια κ.λπ.) στην ετικέτα. Σημειώστε ότι αυτό δεν είναι ισοδύναμο με το κείμενο περιγραφής TTF και δεν θα διατηρηθεί μέσω της μετατροπής. θα πρέπει να προσθέσετε ξεχωριστά την περιγραφή TTF.
Κάνοντας τη γραμματοσειρά ενσωματωμένη
Μόλις εγκαταστήσετε το TTF στο τοπικό σας σύστημα και προεπισκόπησε λίγο για να βεβαιωθείτε ότι τίποτα δεν έχει πάει στραβά, ήρθε η ώρα να το εκτελέσετε μέσω του Font Squirrel's @ γεννήτρια γραμματοσειρών . Για να καταστήσετε τον κώδικα εξόδου όσο το δυνατόν αποτελεσματικότερος και αποτελεσματικότερος, υπάρχουν μερικές επιλογές που αξίζει να σημειωθεί στη λειτουργία εμπειρογνωμόνων της γεννήτριας:
Υποδιαίρεση: Η επιλογή υποσύνοψης σάς επιτρέπει να συμπεριλάβετε μόνο τους χαρακτήρες που έχετε μεταβιβάσει, μειώνοντας το μέγεθος του αρχείου.
Αφαίρεση του πυρήνα: Τα εικονίδια σας θα εμφανίζονται σχεδόν πάντοτε μεμονωμένα, οπότε δεν είναι απαραίτητο να δημιουργούνται κεφαλές (πρόσθετες πληροφορίες σχετικά με την εγγύτητα χαρακτήρων μεταξύ τους). Αυτό, κατά πάσα πιθανότητα, θα μειώσει επίσης το μέγεθος του αρχείου.
WebOnly ™ : Εάν είστε ευαγγελικοί για τους ανθρώπους που χρησιμοποιούν τη γραμματοσειρά σας σύμφωνα με τις προτιμήσεις σας - και μην επιστρέψετε στη λήψη εικόνων από τα glyphs στο Photoshonk - μπορείτε να επιλέξετε αυτήν την επιλογή. Μπορεί επίσης να ταιριάζει καλύτερα στο σχέδιο αδειοδότησης. Θα καλύψω τις άδειες τώρα.
Διανομή της γραμματοσειράς σας
Εάν ενδιαφέρεστε να απελευθερώσετε τη γραμματοσειρά σας, θεωρείται καλή πρακτική να της χορηγήσετε άδεια. Πολλοί ιστότοποι γραμματοσειρών δεν θα μεταφέρουν τη γραμματοσειρά σας χωρίς ένα. Εφόσον χρησιμοποιήσαμε δωρεάν λογισμικό ανοιχτού κώδικα για να φτιάξουμε τα εικονίδια, είναι κατάλληλο να τα διανείμουμε ως τέτοια.
Υπάρχουν πολλές διαθέσιμες επιλογές αδειοδότησης και η διερεύνησή τους είναι μερικές φορές αμηχανία. ο Γενική δημόσια άδεια GNU είναι απολύτως αποδεκτό, αλλά μπορεί να θέλετε να εξετάσετε το Άδεια ανοικτής γραμματοσειράς SIL . Το κύριο πλεονέκτημα με αυτήν την άδεια είναι η παροχή ενός δεσμευμένου ονόματος γραμματοσειράς : Άλλοι σχεδιαστές επιτρέπεται να τροποποιούν τη γραμματοσειρά σας, εφόσον το ονομάζουν διαφορετικά. Στην πράξη, αυτό σημαίνει ότι τα εγκλήματα κατά του σχεδιασμού των εικόνων δεν μπορούν να εκτελεστούν "στο όνομά σας".
Στην περίπτωση οποιασδήποτε από τις άδειες χρήσης, θα πρέπει να συμπεριλάβετε μια έκδοση σε ένα αρχείο κειμένου, καθώς και την εισαγωγή της ειδοποίησης πνευματικών δικαιωμάτων και ενός συνδέσμου με την πλήρη διεύθυνση URL της άδειας χρήσης στο meta της γραμματοσειράς. Επισκεφθείτε τις αντίστοιχες σελίδες αδειοδότησης (που συνδέονται παραπάνω) για πιο συγκεκριμένες οδηγίες.
Το τέλος του CSS spriting
Γιατί να σταματήσετε να δημιουργείτε γενικά εικονίδια χρησιμοποιώντας γραμματοσειρές SVG; Με την ικανότητα να κάνετε εικονίδια έρχεται η δυνατότητα να δημιουργήσετε περισσότερα σχήματα, στοιχεία επωνυμίας και διακοσμήσεις. Αρέσει CSS sprites , όλα αυτά τα οπτικά στοιχεία μπορούν να διατηρηθούν σε ένα αρχείο, μειώνοντας τις κλήσεις του διακομιστή σε ένα ξεχωριστό αίτημα http . Σε αντίθεση με τα CSS sprites, τα στοιχεία είναι και τα δύο με δυνατότητα αλλαγής μεγέθους και δεν εξαρτώνται από συντεταγμένες θέσης (
background-position τιμές) για να εμφανιστεί σωστά. Αυτό τους καθιστά εξαιρετικά καλύτερα προσαρμοσμένο στον σχεδιασμό .
Ας υποθέσουμε ότι επέλεξα να χρησιμοποιήσω μια γραμματοσειρά SVG για να καλύψω ορισμένα βασικά στοιχεία του σχεδιασμού μου αόριστα steampunk -αρέσει blog . Μια απλή απεικόνιση πίνακα του HTML των σχεδίων στοιχείων θα έμοιαζε κάπως έτσι:
Ένα από τα καλύτερα πράγματα για αυτήν την προσέγγιση είναι η ευελιξία. Για παράδειγμα, το δεύτερο σχήμα από αριστερά θα μπορούσε να χρησιμοποιηθεί τόσο ως μικροσκοπικό σχεδιασμό σφαιρών όσο και ως γιγαντιαία διακοσμητική διακόσμηση . Ο χρωματισμός είναι εξίσου εύκολος με τη χρήση color:maroon , αλλά δεν χρειάζεται να τηρείτε τα επίπεδα χρώματα. μπορούν να χρησιμοποιηθούν πολλαπλά εφέ CSS3 για να προσθέσουν υφή και σφριγηλότητα. Για λίγη έμπνευση για να ξεκινήσετε, εξετάστε αυτή η εξαιρετική συλλογή των ενισχυμένων με CSS3 webfonts .
Μια γρήγορη σημείωση σχετικά με τους αναγνώστες οθόνης
Ένα πρόβλημα με τη χρήση γραμματοσειρών για την εμφάνιση οπτικών στοιχείων με αυτόν τον τρόπο είναι η επίδραση αναγνώστη οθόνης παραγωγή. Ένας επισκέπτης στον ιστότοπο ο οποίος διαβάζει οπτικά θα βλέπει γρανάζια, βέλη και παρόμοια, αλλά ένας αναγνώστης οθόνης θα επιμείνει στην ανάγνωση των χαρακτήρων που ορίζουν αυτά τα σχέδια. Για χρήσεις των γραμματοσειρών SVG που είναι διακοσμητικά, σας συνιστώ να παρακολουθήσετε την πρόταση του Coyier: Αντιστοιχίστε τους διανύσματα στο Περιοχή συμπληρωματικής ιδιωτικής χρήσης του Unicode. Αυτοί οι χαρακτήρες δεν θα πρέπει να διαβάζονται από τους αναγνώστες.
Ένα συνεργατικό εικονίδιο webfont
Ως δάσκαλό μου JavaScript, Ρούπερτ , μου επεσήμανε την άλλη μέρα, χρησιμοποιώντας τις γραμματοσειρές SVG για να δημιουργήσετε σύνολα εικόνων προσφέρει μια ενδιαφέρουσα ευκαιρία για συνεργασία. Βλέπετε, ο κώδικας SVG - ο οποίος είναι μια μορφή XML - είναι εξαιρετικά τυποποιημένος και εύκολα αναγνώσιμος από τον άνθρωπο. Είναι ακριβώς το είδος του πηγαίου κώδικα που ταιριάζει στην ανάπτυξη χρησιμοποιώντας μια υπηρεσία "κοινωνικής κωδικοποίησης" όπως GitHub .
Η ιδέα αντέδρασε μαζί μου για τις σημειωτικές επιπτώσεις της: Αν η κατανόηση μιας εικόνας καθορίζεται με συναίνεση , τότε σίγουρα η συναίνεση θα έπρεπε να διαδραματίσει επίσης ρόλο στη διαμόρφωση της. Συνεργαζόμενοι με το εικονίδιο "σύστημα υπογραφής", θα πρέπει να αναδυθούν μόνο τα πιο αρχέτυπα σχέδια εικονιδίων. Θα πρέπει να είμαστε σε θέση να δημιουργήσουμε λεξιλόγια εικονιδίων που πραγματικά ανήκουν στις κοινότητες για τα οποία θα πρέπει να σημαίνουν κάτι.
Δημιούργησα ένα δημόσιο αποθετήριο GitHub για να βοηθήσω στην προώθηση αυτής της ιδέας. Που ονομάζεται Κοινοτική γραμματοσειρά εικονιδίων , η βάση κώδικα του αποθετηρίου δεν είναι πολύπλοκη: Ένας προσεκτικός έλεγχος του προηγούμενου εκπαιδευτικού προγράμματος Inkscape και μια γρήγορη ανάγνωση του σελίδα του έργου θα πρέπει να σας δώσει όλα όσα χρειάζεστε για να εμπλακείτε. Εάν είστε νέοι στο GitHub, δοκιμάστε να δείτε τους σελίδες βοήθειας ή ζητώντας από τον τεχνίτη της γειτονιάς σας (αυτό είναι που κάνω).