Πώς να μετατρέψετε τα εικονίδια σας σε μια γραμματοσειρά Web
Είχα δημιουργήσει μερικά κομψά εικονίδια για έναν επανασχεδιασμό ιστοσελίδων που έκανα και προεπισκόπηση της νέας τοποθεσίας σε ένα παλιό iPad. Η διάταξη έμοιαζε OK σε κανονικό μέγεθος, αλλά με τη μεγέθυνση σε μέρος της σελίδας, ξαφνικά έβλεπα ότι το εικονίδιό μου ήταν ένα θαμπά χάλι, ενώ η κεφαλίδα με κείμενο ήταν ακόμα καθαρή και αιχμηρή. Σε ένα νεότερο iPad με οθόνη Retina, τα εικονίδια δεν φαίνονται αρκετά αιχμηρά, ακόμα και σε κανονικό μέγεθος.
Η πρώτη ιδέα που είχα ήταν να δημιουργήσω εικόνες μεγέθους διπλού μεγέθους, οι οποίες να τις δίνουν στο μισό μέγεθος χρησιμοποιώντας το CSS. Ενώ αυτό το έκανε να φαίνονται καλύτερα σε μια οθόνη Retina σε κανονικό μέγεθος, μόλις αρχίσατε να τσιμπώνετε και να μεγεθύνετε, η θολότητα επέστρεψε. Αλλά το κείμενο ήταν ακόμα τραγανό και απότομο.
Η απάντηση ήταν προφανής. Χρειάστηκε να μετατρέψω τα εικονίδια μου σε γραμματοσειρά.
Σε αυτό το σεμινάριο, θα εξετάσουμε πώς να μετατρέψουμε τα εικονίδια διανυσμάτων σε μια γραμματοσειρά ιστού χρησιμοποιώντας μια μεγάλη δωρεάν εφαρμογή ιστού που ονομάζεται IcoMoon. Στη συνέχεια, θα δούμε πώς να χρησιμοποιήσουμε τα δημιουργούμενα αρχεία γραμματοσειρών και το CSS σε μια ιστοσελίδα.
Τα πλεονεκτήματα της χρήσης γραμματοσειράς εικονιδίων
Μια γραμματοσειρά εικονιδίων έχει πολλά πλεονεκτήματα έναντι των εικόνων bitmap, εκτός από την ευκρίνεια της εικόνας.
- Καταλληλότητα: μια γραμματοσειρά εικονιδίων θα είναι πολύ μικρότερη σε μέγεθος αρχείου από μια σειρά εικόνων, ειδικά εάν έχετε χρησιμοποιήσει εικόνες διπλού μεγέθους για οθόνες Retina. Και αφού φορτωθεί η γραμματοσειρά, τα εικονίδια σας θα αποτυπωθούν αμέσως, χωρίς να χρειάζεται να κατεβάσετε μια εικόνα.
- Ευελιξία: μια γραμματοσειρά εικονιδίου μπορεί να οριστεί σε οποιοδήποτε μέγεθος ρυθμίζοντας το
font-sizeιδιοκτησίας στο συνοδευτικό CSS. Αυτό σας δίνει τη δυνατότητα να πειραματιστείτε με διαφορετικά μεγέθη. ενώ, για εικόνες bitmap, θα πρέπει να εξάγετε ένα αρχείο εικόνας σε κάθε μέγεθος. - Ευελιξία: Τα εφέ κειμένου μπορούν εύκολα να εφαρμοστούν στο εικονίδιο σας, συμπεριλαμβανομένων των χρωμάτων, των σκιών και των συνθηκών ανατροπής. Επίσης, θα εμφανίζονται καλά ενάντια σε οποιοδήποτε χρώμα ή φόντο φόντου.
- Συμβατότητα: Οι γραμματοσειρές Ιστού υποστηρίζονται από όλα τα σύγχρονα προγράμματα περιήγησης και τα παλαιότερα προγράμματα περιήγησης, ακόμα και από το IE 6 και τα προηγούμενα.
Ας αρχίσουμε λοιπόν!
Δημιουργία γραμματοσειράς εικονιδίου
Οι γραμματοσειρές συμβόλων μπορούν να δημιουργηθούν χρησιμοποιώντας μια ειδική εφαρμογή δημιουργίας γραμματοσειρών όπως Glyphs , αλλά ένα επαγγελματικό εργαλείο τυπογραφίας είναι πολύ πέρα από τις ανάγκες ή τις απαιτήσεις της δημιουργίας μιας απλής γραμματοσειράς εικονιδίων, στην οποία η σχέση μεταξύ των χαρακτήρων (π.χ.
Μέχρι στιγμής ο ευκολότερος τρόπος είναι να χρησιμοποιήσετε μια μεγάλη δωρεάν ηλεκτρονική εφαρμογή που ονομάζεται IcoMoon , από την Keyamoon, η οποία απομακρύνει όλη την ταλαιπωρία της μετατροπής των συμβόλων σε μια γραμματοσειρά ιστού.
Αυτή η εφαρμογή HTML5 αφαιρεί όλο τον πόνο από τη δημιουργία αρχείων γραμματοσειρών για απλές χρήσεις, όπως γραμματοσειρές κτιρίων. Το IcoMoon έρχεται με μια σειρά σετ εικονιδίων που έχουν ήδη φορτωθεί και μπορείτε να προσθέσετε περισσότερα στη βιβλιοθήκη σας, τα περισσότερα από τα οποία μπορούν να χρησιμοποιηθούν δωρεάν (ελέγξτε την άδεια χρήσης). Αν ψάχνετε για αρκετά συνηθισμένα εικονίδια, όπως "λήψη αρχείων" και "καλάθι αγορών", τότε μπορεί να διαπιστώσετε ότι χρησιμοποιώντας ένα από αυτά είναι προτιμότερο να δημιουργήσετε το δικό σας.
Βήμα βήμα
1. Προετοιμάστε τις εικόνες σας
Κατ 'αρχάς, πρέπει να δημιουργήσετε τα εικονίδια σε ένα πρόγραμμα σχεδίασης διανυσμάτων που μπορεί να εξαγάγει σε μορφή SVG, όπως το Illustrator ή το Inkscape.
Ενώ σχεδιάζετε, μπορείτε να εργαστείτε με τα χρώματα που σας αρέσουν, αλλά τα εικονίδια πρέπει να είναι ένα συμπαγές χρώμα. Βεβαιωθείτε ότι κάθε εικονίδιο έχει περίπου το ίδιο μέγεθος. Έχοντας ένα εικονίδιο πολύ ψηλότερο ή μεγαλύτερο από ένα άλλο, θα είναι δύσκολο να δημιουργήσετε μια συνεπή γραμματοσειρά. Εδώ, έπρεπε να μειώσω το πλάτος του εικονιδίου αεροσκάφους μου έτσι ώστε να ταιριάζει με τους άλλους.
2. Καθαρίστε
Ελέγξτε προσεκτικά κάθε εικονίδιο για να βεβαιωθείτε ότι δεν έχει ατέλειες - λεπτομέρειες που φαίνονται εντάξει σε μικρότερα μεγέθη μπορεί να κρύψουν μικρά ελαττώματα όταν μεγεθυνθούν. Στο εικονίδιο που φαίνεται παρακάτω, πρέπει να αφαιρέσω τα οδοντωτά βήματα που έχουν φουσκώσει όταν στοιβάζονται τα στοιχεία.
Στο Illustrator, χρησιμοποιήστε το εργαλείο Pathfinder για να ενώσετε τα επικαλυπτόμενα στοιχεία και το στοιχείο μείον Front για να αφαιρέσετε στοιχεία αποκοπής, όπως το αστέρι σε αυτά τα εικονίδια.
Βασική αρχή είναι να διασφαλίσετε ότι το εικονίδιο σας είναι αναγνώσιμο σε μικρές κλίμακες. Απλοποιήστε όσο το δυνατόν περισσότερο.
3. Εξαγωγή στο SVG
Τώρα, επιλέξτε ένα εικονίδιο και αντιγράψτε και επικολλήστε το σε ένα νέο τετράγωνο έγγραφο (για παράδειγμα 200 × 200 εικονοστοιχεία). Κλιμάρετε το εικονίδιο έτσι ώστε να ταιριάζει. Μπορεί να είναι χρήσιμο να ορίσετε έναν χάρακα βασικής γραμμής. Χρωματίστε το εικονίδιο έτσι ώστε να είναι μαύρο σε λευκό φόντο.
Τώρα, επιλέξτε File… Save as και αποθηκεύστε το αρχείο ως αρχείο SVG. Χρησιμοποιήστε τις προεπιλεγμένες ρυθμίσεις SVG. Αφού το κάνετε αυτό για όλα τα εικονίδια, είστε έτοιμοι να δημιουργήσετε μια γραμματοσειρά ιστού.
4. Εισαγωγή στο IcoMoon
Ανοιξε το Εφαρμογή IcoMoon web . Για να εισαγάγετε ένα εικονίδιο, κάντε κλικ στο κουμπί "Εισαγωγή εικονιδίων" και, στη συνέχεια, επιλέξτε τα αρχεία SVG που θέλετε να προσθέσετε - μπορείτε να προσθέσετε πολλά αρχεία ταυτόχρονα. Αυτά θα εμφανιστούν στη συνέχεια στα "Προσαρμοσμένα εικονίδια". Εάν επισημαίνονται με κίτρινο χρώμα, θα είναι μέρος της γραμματοσειράς εικονιδίων που θα δημιουργήσετε. Σε αυτό το παράδειγμα, μπορείτε να δείτε ότι αποφάσισα να μην εξάγω ένα από τα δικά μου εικονίδια και πρόσθεσα ένα από τα εικονίδια από τα "Μίνι-εικονίδια".
5. Εξαγωγή γραμματοσειράς από το IcoMoon
Μπορείτε να κάνετε κλικ στο κουμπί "Επεξεργασία", εάν θέλετε να προσαρμόσετε τη θέση, το μέγεθος ή την περιστροφή του εικονιδίου. Χρησιμοποιήστε το κουμπί "Αποθήκευση αντιγραφής" για να δημιουργήσετε παραλλαγές εικονιδίων (για παράδειγμα, μια εικόνα κατοπτρισμού ενός εικονιδίου). Προσθέστε μια σημαντική ετικέτα στο εικονίδιο, επειδή αυτό θα χρησιμοποιηθεί για να δημιουργήσει το όνομα της κλάσης γι 'αυτό.
Όταν είστε έτοιμοι, κάντε κλικ στο κουμπί "Γραμματοσειρά" στο κάτω μέρος της οθόνης για να ξεκινήσετε τη δημιουργία της γραμματοσειράς. Αυτό είναι όπου μπορείτε να ορίσετε ποιο εικονίδιο έχει αντιστοιχιστεί σε ποιο χαρακτήρα? για παράδειγμα, εάν το εικονίδιο σας είναι έξι εικόνες μιας σφαίρας σφαιρών, μπορείτε να αντιστοιχίσετε τους χαρακτήρες q, w, e, r, t και y στα έξι πλαίσια. Στις προτιμήσεις, επιλέξτε ένα όνομα γραμματοσειράς. Μπορείτε επίσης να προσαρμόσετε τις μετρήσεις της γραμματοσειράς, αλλά αν δεν πρόκειται να ορίσετε την προσαρμοσμένη γραμματοσειρά σας παράλληλα με το κανονικό κείμενο, δεν χρειάζεται πραγματικά να ανησυχείτε για αυτό.
6. Κατεβάστε τα αρχεία γραμματοσειρών
Κάντε κλικ στην επιλογή "Λήψη" για να κάνετε λήψη του πακέτου γραμματοσειρών στο μηχάνημά σας Θα είναι ένας υποφάκελος που περιέχει τις ίδιες τις γραμματοσειρές (σε μορφές WOFF, EOT και TTF), καθώς και μια δείγμα σελίδας HTML και το αντίστοιχο CSS. Υπάρχει ακόμη και ένα αρχείο JavaScript με μια λύση, εάν πρέπει να υποστηρίξετε IE 6 ή 7.
Για να προσθέσετε τις γραμματοσειρές στο έργο σας, αντιγράψτε τον υποφάκελο γραμματοσειρών στον ιστότοπό σας. Μπορείτε να αντιγράψετε και να επικολλήσετε το CSS από το style.css στο αρχείο CSS της δικής σας ιστοσελίδας, αλλά η προσέγγισή μου είναι να το μετονομάσετε ως fonts.css και να το διατηρήσετε ως ξεχωριστό αρχείο CSS. Στη συνέχεια, πρέπει να προσθέσετε μια αναφορά σε αυτό το αρχείο CSS στο αρχείο HTML χρησιμοποιώντας τον σχετικό σύνδεσμο:
<link rel="stylesheet" href="fonts.css" />Στο στοιχείο @ font-face του αρχείου CSS, θα χρειαστεί να αλλάξετε την αναφορά της διεύθυνσης URL στη νέα σχετική θέση των γραμματοσειρών ή απλά να ρίξετε το φάκελο γραμματοσειρών στον φάκελο φύλλων στυλ.
7. Κλήση της γραμματοσειράς
Όπως μπορείτε να δείτε στο δείγμα index.html αρχείο, υπάρχουν δύο τρόποι να αναφερθεί η προσαρμοσμένη γραμματοσειρά, είτε από τον χαρακτήρα της (unicode ή το όνομα) είτε από το όνομα της κλάσης. Το πρώτο παράδειγμα χρησιμοποιεί την κατάσταση εικονιδίου δεδομένων HTML5
<div aria-hidden="true" data-icon="g"></div>Εδώ, η τάξη fs1 χρησιμοποιείται για να ορίσετε το μέγεθος της γραμματοσειράς. Η αναφορά που αποκρύπτεται από την aria βοηθά να διασφαλιστεί ότι ο χαρακτήρας δεν θα μιλήσει από οποιονδήποτε αναγνώστη οθόνης.
Η δεύτερη μέθοδος χρησιμοποιεί ένα στοιχείο span:
<span aria-hidden="true"></span>Αυτή η μέθοδος είναι χρήσιμη όταν θέλετε το σύμβολο να βρίσκεται σε κανονική θέση με το κανονικό κείμενο.
Εάν θέλετε να κάνετε το εικονίδιο ένα σύνδεσμο, μπορείτε να το τυλίξετε όλα σε href :
8. Προηγμένες ιδέες
Όπως μόλις ανακαλύψαμε με την κατάσταση του hover, η αλλαγή του χρώματος του εικονιδίου είναι τόσο εύκολη όσο η ρύθμιση της ιδιότητας χρώματος στο CSS και η αλλαγή του μεγέθους είναι τόσο εύκολη όσο και η ρύθμιση της ιδιότητας μεγέθους γραμματοσειράς. Μπορείτε επίσης να ορίσετε και άλλες ιδιότητες, όπως σκιά κειμένου και διαφάνεια, διατηρώντας ταυτόχρονα την ανεξαρτησία της γραμματοσειράς ως προς την επίλυση προβλημάτων.
Δοκιμάστε το και εγγυώμαι ότι δεν θα χρησιμοποιήσετε πάλι τα εικονίδια bitmap.
Δοκιμάσατε να χρησιμοποιείτε γραμματοσειρές για εικονίδια; Πώς το βρήκατε; Ενημερώστε μας στα σχόλια.