Πώς να χρησιμοποιήσετε τις γραμματοσειρές Google στο επόμενο πρόγραμμα Web & γιατί θα έπρεπε

Διαφήμιση

Η επιλογή γραμματοσειράς είναι μια αναπόσπαστη απόφαση σχεδιασμού σε οποιαδήποτε ιστοσελίδα, αλλά τις περισσότερες φορές είμαστε ικανοποιημένοι με την ίδια παλιά serif και sans-serif οικογένεια. Ενώ το κύριο σώμα κειμένου θα πρέπει πάντα να είναι κάτι βελτιστοποιημένο για την αναγνωσιμότητα αν δεν θέλετε αναγνώστες για να πάρετε έναν πονοκέφαλο, οι τίτλοι και το κείμενο standout μπορεί να είναι ο χώρος σας για να προσθέσετε ένα μοναδικό σχέδιο με κάποια γραμματοσειρά κλίση.

Διαβάστε παρακάτω για να μάθετε πώς μπορείτε να χρησιμοποιήσετε κάποιο από τα Γραμματοσειρές Google Web στον ιστότοπό σας.

Ιστορικό

Με το CSS, μπορείτε να καθορίσετε μια αλυσίδα γραμματοσειρών που θα χρησιμοποιήσετε, εάν η προτιμώμενη δεν είναι διαθέσιμη. Αυτό σας επιτρέπει να έχετε μια πρώτη επιλογή - ίσως μια λιγότερο κοινή, αλλά δωρεάν γραμματοσειρά? τότε έχετε δημιουργήσει αντίγραφα ασφαλείας που θα υπάρχουν πάντα με Windows ή Mac. Σε γενικές γραμμές όμως, οι σχεδιαστές ιστοσελίδων θα κολλήσουν με δοκιμασμένες και δοκιμασμένες αλυσίδες οικογένειας γραμματοσειρών, όπως

που περιγράφονται από τα σχολεία του W3.

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

• Οι εικόνες δεν κλιμακώνονται καλά.
• Οι εικόνες δεν μπορούν να διαβαστούν από τους αναγνώστες οθόνης.
• Δεν μπορείτε να επισημάνετε το κείμενο στις εικόνες.
• Οι μηχανές αναζήτησης δεν μπορούν να "διαβάσουν" τις εικόνες.
• Η φόρτωση εικόνας επιβραδύνει την ιστοσελίδα.

Υπάρχει λοιπόν μια καλύτερη λύση; Ένα που μας επιτρέπει να χρησιμοποιήσουμε ένα γενικά διαθέσιμο σύνολο ελεύθερων γραμματοσειρών, χωρίς να καταφεύγουμε σε εικόνες;

Γραμματοσειρές Google Web

Η απάντηση προέρχεται από την Google. Οι Γραμματοσειρές Google Web είναι ουσιαστικά μια συλλογή από (στην τρέχουσα μέτρηση, 489) βελτιστοποιημένες γραμματοσειρές που είναι αποθηκευμένες στο σύννεφο, οι οποίες μπορούν να ενσωματωθούν στα έργα σας στο διαδίκτυο (ή ακόμα και να τις κατεβάσετε για χρήση στον υπολογιστή σας).

Επιπλέον, ο ιστότοπος Γραμματοσειρές Google Web καθιστά εύκολο να συγκρίνετε και να επιλέξετε, και στη συνέχεια σας δίνει όλο τον κωδικό που χρειάζεστε για να ενσωματώσετε τη γραμματοσειρά μέσω Javascript ή CSS - περισσότερα για αυτό αργότερα.

Ξεκινώντας

Προχωρήστε στο Web Fonts site, και κάντε κλικ στο κουμπί αρχίστε την επιλογή των γραμματοσειρών να ξεκινήσω.

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

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

Όταν βλέπετε ένα που σας αρέσει, προσθέστε το στη συλλογή σας.

Κάντε κλικ στο ανασκόπηση για να εισέλθετε στη λειτουργία αναθεώρησης και να συγκρίνετε όλες τις επιλογές σας.

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

Μετακινηθείτε προς τα δεξιά για να δείτε άλλες γραμματοσειρές στην τρέχουσα συλλογή σας. κάντε κλικ στο Χ στην πάνω δεξιά γωνία για να τα απορρίψετε.

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

Εντάξει, επιλεγμένο. Πώς μπορώ να τα χρησιμοποιήσω;

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

Μετακινηθείτε προς τα κάτω για να πάρετε τον σχετικό κωδικό. Υπάρχουν τρεις επιλογές εδώ:

• Πρότυπο (σύνδεσμος rel = μέθοδος): αυτό πρέπει να επικολληθεί στην ενότητα HEAD του ιστότοπού σας, οπότε θα χρειαστεί να είστε άνετοι με την HTML για να το κάνετε αυτό. Για το WordPress, θα το προσθέσετε header.php αν επιλέξετε αυτόν τον τρόπο. Δεν το συνιστώ.
• @εισαγωγή: αυτή η μέθοδος πηγαίνει κατευθείαν στο αρχείο φύλλου στυλ, που είναι όπου θα καθορίζουμε τις γραμματοσειρές για διάφορα στοιχεία σελίδας ούτως ή άλλως, έτσι προσωπικά το συνιστώ αυτό. Για θέματα WordPress, τοποθετήστε το style.css αμέσως μετά το τμήμα πληροφοριών θεμάτων
• Javascript: Αυτονόητη - τοποθετήστε τον κώδικα οπουδήποτε στο θέμα σας. Το όφελος από τη χρήση αυτής της μεθόδου είναι ότι η γραμματοσειρά θα φορτωθεί ασύγχρονα - ο ιστότοπος θα εμφανιστεί πρώτα στην εφεδρική γραμματοσειρά, κατόπιν θα αλλάξει μόλις ολοκληρωθεί η φόρτωση της γραμματοσειράς. Παρόλο που ο αρχικός χρόνος φόρτωσης της σελίδας θα είναι ταχύτερος, θα δημιουργήσει μια ξαφνική αλλαγή για τον χρήστη που δεν θα θέλατε.

Αυτό είναι το βήμα 1. Το βήμα 2 είναι να καθορίσετε τη γραμματοσειρά που θέλετε να χρησιμοποιηθεί. Δεν έχουμε χώρο για ένα πλήρες φροντιστήριο CSS εδώ (προτείνω αυτά 5 ιστότοποι εκμάθησης CSS Top 5 ιστότοποι για να μάθετε το CSS Online Διαβάστε περισσότερα ; και τη δική μου 5 βήματα μωρών στο CSS tutorial 5 μωρά βήματα για να μάθουν CSS και να γίνουν ένα Kick-Ass CSS ΜάγοςΤο CSS είναι οι μοναδικές πιο σημαντικές ιστοσελίδες αλλαγών που έχουν δει την τελευταία δεκαετία και άνοιξε το δρόμο για τον διαχωρισμό του στυλ και του περιεχομένου. Με τον σύγχρονο τρόπο, το XHTML ορίζει τη σημασιολογική δομή ... Διαβάστε περισσότερα ), αλλά αρκεί να πείτε ότι θα προσαρμόσετε οτιδήποτε στο φύλλο στυλ σας που λέει γραμματοσειρά-οικογένεια, και βεβαιωθείτε ότι έχετε συμπεριλάβει το στυλ αντιγράφου ασφαλείας όπως προτείνεται από την Google.

Βελτιστοποιημένη

Χρησιμοποιώντας μια μη τυποποιημένη γραμματοσειρά που χρειάζεται ο χρήστης για λήψη, πρόκειται να προσθέσει λίγο χρόνο στη φόρτωση της σελίδας - αυτό είναι αναπόφευκτο. Ωστόσο, μια τυπική γραμματοσειρά ιστού από το Google είναι περίπου 100KB - για σύγκριση, πρόκειται για το μέγεθος μιας καλής ποιότητας μεσαίου μεγέθους εικόνας jpeg. Όπως και οι εικόνες, η γραμματοσειρά του ιστού θα αποθηκευτεί στο πρόγραμμα περιήγησης του χρήστη, οπότε μόνο το αρχικό φορτίο της σελίδας θα καθυστερήσει ελαφρώς.

Περίληψη

Το παραδέχομαι - μου αρέσουν οι γραμματοσειρές. Περιμένω όπως πολλοί από σας, έχω την τάση να τους ορδή στον σκληρό δίσκο μου - σε κάθε περίπτωση, ξέρετε ;! Τώρα μπορώ να χρησιμοποιήσω κάποιες μοναδικές γραμματοσειρές στα έργα μου στο διαδίκτυο - είμαι ενθουσιασμένος. Σας παρακαλούμε, μην παραμελούν τις γραμματοσειρές στον ιστότοπό σας!

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