Ένας οδηγός για καλύτερα και ευκρινέστερα εικονίδια UI με γραμματοσειρές Web

Αν είστε εξοικειωμένοι με τη χρήση bitmap image formats (όπως PNG και GIF) για να εμφανίσετε εικονίδια σε έναν ιστότοπο, τότε θα είστε εξοικειωμένοι με τις αδυναμίες του. Πρώτα απ 'όλα, ανάλογα με τη διάσταση και πόσες πληροφορίες χρώματος έχει το εικονίδιο, ένα μέγεθος αρχείου εικονιδίου μπορεί να είναι πολύ μεγάλο.

Εάν έχουμε πάρα πολλά εικονίδια για να βάλουμε σε έναν ιστότοπο, θα επιβραδύνει επίσης την απόδοση του ιστότοπου, καθώς πολλές αιτήσεις HTTP πρέπει να διεξάγονται από το πρόγραμμα περιήγησης. Αν και αυτό το πρόβλημα μπορεί να λυθεί με το CSS sprite, το μέγεθος του αρχείου είναι ακόμα μεγάλο.

Το εικονίδιο bitmap έχει επίσης ελλείψεις στην ευελιξία και την επεκτασιμότητα. ας πούμε ότι πρέπει να μεγεθύνουμε ή να μεγεθύνουμε το εικονίδιο σε ένα συγκεκριμένο επίπεδο ή να το δούμε με πολύ υψηλή ανάλυση οθόνης όπως στην οθόνη του αμφιβληστροειδούς. το εικονίδιο θα είναι σίγουρα να φανεί θολή.

Λοιπόν, εάν λάβετε υπόψη ορισμένα από τα παραπάνω ζητήματα, ίσως χρειαστεί να χρησιμοποιήσετε εικονικές γραμματοσειρές.

Χρήση γραμματοσειρών εικονιδίων

Ενα εικονίδιο γραμματοσειράς είναι ένα σύνολο εικονιδίων που συσκευάζονται σε μια γραμματοσειρά Ιστού που μπορεί αργότερα να ενσωματωθεί σε μια ιστοσελίδα χρησιμοποιώντας @ font-face. Όπως επεσήμανε ο Chris στο CSS-trick, υπάρχουν πολλά οφέλη από τη χρήση γραμματοσειράς πάνω στην εικόνα για την παράδοση εικόνων.

• Η γραμματοσειρά είναι ένα αντικείμενο που βασίζεται σε φορέα, το οποίο από τη φύση του είναι ανεξάρτητο από την ανάλυση, έτσι ώστε το εικονίδιο θα παραμείνει τραγανό σε διάφορες αναλύσεις οθόνης, συμπεριλαμβανομένων αναλύσεων πολύ υψηλής οθόνης (όπως επίπεδο αμφιβληστροειδούς).
• Είναι επίσης κλιμακωτή, επιτρέποντάς της να διευρυνθεί σε πολλά επίπεδα χωρίς να χάσει την ποιότητα και την ακρίβεια.
• Δεδομένου ότι το εικονίδιο είναι βασικά γραμματοσειρά, μπορούμε επίσης να ελέγξουμε το χρώμα, τη διαφάνεια, τη σκιά κειμένου και ακόμη και να το αλλάξουμε σε μέγεθος μέσω του φύλλου στυλ
• Μπορούμε επίσης να ζωντανέψουμε το εικονίδιο με το CSS3.
• Το εικονίδιο καλείται με το @ font-face κανόνα που έχει υποστηριχθεί ήδη από τον Internet Explorer 4 (με .eot).
• Μικρότερο αίτημα HTTP και μικρότερο μέγεθος αρχείου.

Εδώ είναι μερικές από τις καλύτερες δωρεάν γραμματοσειρές εικονιδίων που μπορούμε να βρούμε:

• Γραμματοσειρά Awesome
• IcoMoon
• Εικόνες κοινωνικών μέσων
• Εικόνες Ίδρυμα Zurb

Βεβαιωθείτε ότι έχετε ελέγξει και ακολουθήσει την άδεια πριν την ενσωμάτωσή της στον ιστότοπό σας για να τιμήσει το χρόνο του συγγραφέα και τη σκληρή δουλειά του.

@ κανόνας γραμματοσειράς

Όπως αναφέρθηκε, τα εικονίδια είναι ενσωματωμένα χρησιμοποιώντας @ font-face ρυθμίστε μέσω του φύλλου στυλ που ορίζει νέο γραμματοσειρά-οικογένεια. Στο παρακάτω παράδειγμα θα χρησιμοποιήσουμε τα σύμβολα Web.

 @ γραμματοσειρά font-family: 'WebSymbolsRegular'; src: url ('fonts / websymbols-regular-webfont.eot'). src: url ('fonts / websymbols-regular-webfont.eot? #iefix') μορφή ('embedded-opentype'), url ('fonts / websymbols-regular-webfont.ttf') μορφή ('truetype'), μορφή url ('fonts / websymbols-regular-webfont.svg # WebSymbolsRegular')  

Στη συνέχεια, στο έγγραφο HTML, πρέπει να προσθέσουμε μόνο τους χαρακτήρες που αντιπροσωπεύουν το εικονίδιο και όχι να εφαρμόσουμε το νέο γραμματοσειρά-οικογένεια ευρέως στο έγγραφο, μπορούμε να κάνουμε πιο συγκεκριμένα προσθέτοντας μια επιπλέον κλάση σε ορισμένα στοιχεία που πρέπει να αναπαρασταθεί το εικονίδιο, όπως π.χ.

 
 
h
 
Εγώ
 
j
 
ΕΝΑ
 
Εγώ
 
 

Επιστροφή στο φύλλο στυλ, ορίζουμε το νέο γραμματοσειρά-οικογένεια για την τάξη που μόλις προσθέσαμε:

 .εικονίδιο γραμματοσειράς font-family: WebSymbolsRegular; μέγεθος γραμματοσειράς: 12pt;  

• Demo @ font-face

Χρησιμοποιώντας ψευδο-στοιχεία

Εάν το εικονίδιο αντιμετωπίζεται ως το πλευρικό στοιχείο, μπορούμε επίσης να παραδώσουμε το εικονίδιο ψευδο-στοιχείο. Υποθέτοντας ότι η σήμανση HTML είναι η εξής:

 
 
Απάντηση
 
Απάντηση σε όλους
 
Προς τα εμπρός
 
Συνημμένο
 
Εικόνα
 
 

Μπορούμε να το κάνουμε με αυτόν τον τρόπο στο φύλλο στυλ:

 ul.icon-font.pseudo li: πριν από την font-family: WebSymbolsRegular; περιθώριο-δεξιά: 5px;  ul.icon-font.pseudo li: nth-child (1): πριν από περιεχόμενο: "h";  ul.icon-font.pseudo li: nth-child (2): Πριν από περιεχόμενο: "i";  ul.icon-font.pseudo li: nth-child (3): πριν από περιεχόμενο: "j";  ul.icon-font.pseudo li: nth-child (4): πριν από περιεχόμενο: "A";  ul.icon-font.pseudo li: nth-child (5): πριν από περιεχόμενο: "I";  

• Επίδειξη ψευδο-στοιχείου

Ιδιωτική χρήση Unicode

Υπάρχει μια περίπτωση όπου τα εικονίδια δεν ενσωματώθηκαν με γράμματα (A, B, C, D, κ.λπ.), αλλά ενσωματώθηκαν σε Unicode Private Use για να ελαχιστοποιηθεί η σύγκρουση μεταξύ των χαρακτήρων. Όπως και στο FontAwesome, ο συντάκτης έχει προσθέσει ευτυχώς όλους τους χαρακτήρες κώδικα στο φύλλο στυλ, που μοιάζει με αυτό?

 .εικονίδιο-γυαλί: πριν από περιεχόμενο: "\ f0c6";  

Αλλά όταν πρέπει να ενσωματώσουμε το εικονίδιο απευθείας στο HTML, κάτι σαν τον ακόλουθο κώδικα \ f0c6 δεν θα εμφανίσει το αιχμηρό εικονίδιο, καθώς δεν είναι έγκυρος χαρακτήρας κωδικοποιημένος σε HTML.

Το HTML χρειάζεται αριθμητικό σημείωμα αναφοράς για την απόδοση ειδικών χαρακτήρων. Έχουμε καλύψει σχετικά με αυτό λίγο στο προηγούμενο σεμινάριο μας για CSS3 κουμπιά? αυτός ο χαρακτήρας έχει προστεθεί με συνδυασμό ενός σημείου ampersand (& &), ένα σημάδι κατακερματισμού (# #) και ένα Χ ακολουθούμενη από τον δεκαεξαδικό αριθμό που αντιπροσωπεύει τον χαρακτήρα.

Για παράδειγμα, το f0c6 είναι ένας δεκαεξαδικός αριθμός, οπότε η αναφορά αριθμητικού χαρακτήρα στην HTML θα είναι & # xf0c6;, στο FontAwesome αυτός ο κωδικός θα εμφανίσει το εικονίδιο κλιπ χαρτιού, όπως έτσι?

• Demo Unicode

Υποσύνολο γραμματοσειράς

Τα εικονίδια της συλλογής ενδέχεται να μην είναι απαραίτητα. Σε αυτή την περίπτωση, μπορούμε να αποθέσουμε τους αχρησιμοποίητους χαρακτήρες με υποσύνολο της γραμματοσειράς που θα χρησιμοποιηθεί επίσης οδηγούν σε χαμηλότερα μεγέθη αρχείων γραμματοσειράς. Ευτυχώς, υπάρχει ένα εύχρηστο εργαλείο από το FontSquirrel για να κάνει αυτή τη δουλειά εύκολα, @ γεννήτρια γραμματοσειρών.

Αφού μεταβείτε στη σελίδα αυτή και προσθέσετε τη γραμματοσειρά, επιλέξτε Εμπειρογνώμονας. Θα δείτε μερικές ακόμα επιλογές. επιλέγω Custom Subsetting.

Σε αυτό το παράδειγμα, χρησιμοποιούμε τη γραμματοσειρά Sociolico για την εμφάνιση εικονιδίων κοινωνικών μέσων στον ιστότοπό μας, αλλά τα εικονίδια που θα χρειαστούμε είναι μόνο το Dribble, το Facebook και το Twitter, τα οποία αντίστοιχα αντιπροσωπεύονται από αυτούς τους χαρακτήρες. d, f και t. Έτσι, βάλτε αυτούς τους χαρακτήρες στο πεδίο εισαγωγής Ενός Χαρακτήρα ως εξής:

Και τελειώσαμε. Τώρα μπορούμε να κατεβάσουμε τη γραμματοσειρά και στην περίπτωσή μου το μέγεθος της γραμματοσειράς έχει αποδειχθεί ότι είναι μόνο 3Kb έως 5Kb. Θυμηθείτε επίσης ότι οι μόνοι χαρακτήρες που θα γίνει σε ένα εικονίδιο μόνο d, f και t, ενώ οι άλλοι χαρακτήρες θα αποδώσουν μόνο μια κανονική επιστολή.

Τελική σκέψη

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

Ωστόσο, εάν ο γενικός σχεδιασμός μας δεν απαιτεί λεπτομέρειες σε αυτό το επίπεδο, αυτή η προσέγγιση θα μπορούσε να είναι ένας καλύτερος τρόπος για την εξυπηρέτηση εικονιδίων σε ιστότοπους. Έχει ευελιξία, επεκτασιμότητα, είναι έτοιμο για αμφιβληστροειδή με πολύ μικρό μέγεθος αρχείου, τι άλλο μπορούμε να ζητήσουμε?

Τέλος, εάν θέλετε να εμβαθύνετε σε αυτό το θέμα, παρακάτω έχουμε βάλει μαζί μερικές χρήσιμες αναφορές, καθώς και το demo και τον πηγαίο κώδικα για λήψη.

• Πώς να κάνετε τη δική σας εικονίδιο Webfont - WebDesignerDepot.com
• Εμφάνιση χαρακτηριστικών γραμματοσειρών και δεδομένων - 24ημέρες
• Ιδιωτική χρήση Unicode - Βικιπαίδεια

• Διαδήλωση
• Λήψη πηγής