Όλη υγεία! Σήμερα θέλω να σας πω πώς να το χρησιμοποιήσετε Google Fonts APIγια να εισάγετε τις γραμματοσειρές που θέλετε.

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

Μετά από αυτό, θα δείτε μια σελίδα όπου μπορείτε να επιλέξετε τα στυλ που χρειάζεστε για τη γραμματοσειρά.

Για παράδειγμα, ας επιλέξουμε κανονικά (400) και bold (700) στυλ.

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

Τώρα ας δημιουργήσουμε ένα αρχείο index.htmlμε μια παράγραφο κειμένου.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Σαέπε, αξιωματούχος;

Ας συμπεριλάβουμε το φύλλο στυλ μας στην ετικέτα κεφάλι

Και στο φύλλο στυλ, στην αρχή του αρχείου, επικολλήστε τον αντιγραμμένο κώδικα.

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400.700);

Διάλεξα τη γραμματοσειρά Open Sansως παράδειγμα. Είναι ο πρώτος.

Στη σελίδα με τη γραμματοσειρά, κάτω από τον αριθμό 4 , μπορείτε να βρείτε το στυλ που χρειαζόμαστε. Ας το αντιγράψουμε και ας το εφαρμόσουμε στην παράγραφο μας.

P ( γραμματοσειρά-οικογένεια: "Open Sans", sans-serif; )

Ολα! Τώρα μπορείτε να απολαύσετε τη νέα γραμματοσειρά!

Μην ξεχνάτε όμως ότι επιλέξαμε και ένα τολμηρό στυλ. Για να το εφαρμόσεις αρκεί να γράψεις βάρος γραμματοσειράςμε τον αριθμό που επιλέξατε στον ιστότοπο. Στην περίπτωσή μου - 700 .

Π(
font-family: "Open Sans", sans-serif;
Βάρος γραμματοσειράς: 700
}

Εκτός από την τόλμη, μπορείτε να εφαρμόσετε πλάγιο στυλ εάν το επιλέξετε στον ιστότοπο.

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

Αρα αυτο ειναι. Σας ευχαριστώ για την προσοχή σας και τα λέμε σύντομα!

Χαιρετισμούς αγαπητοί αναγνώστες. Σήμερα θα μιλήσουμε για τις γραμματοσειρές google (google web fonts), πώς να τις κατεβάσετε και να συνδεθείτε στον ιστότοπο.

Πηγαίνω στον ιστότοπο www.google.com/fonts/, στο φίλτρο στα δεξιά, επιλέξτε: 1. την επιθυμητή κατηγορία, 2. εάν χρειάζεται, ταξινομήστε τα και 3. επιλέξτε τη γλώσσα που χρειαζόμαστε (αν χρειάζεστε ρωσική γραμματοσειρά στο μενού στα αριστερά, επιλέξτε κυριλλικό).

Επομένως, επιλέξαμε τη γραμματοσειρά, τώρα πρέπει να επιλέξετε το στυλ της, για αυτό επεκτείνετε τον πίνακα από κάτω ( Ανοίξτε το συρτάρι επιλογής) και μεταβείτε στην καρτέλα ΠΡΟΣΑΡΜΟΓΗκαι επιλέξτε τα στυλ και τις γλώσσες που θέλετε.

Για λήψη κάντε κλικ στο κουμπί λήψη.

Σύνδεση της γραμματοσειράς που έχετε λάβει

Αντιγράψτε τις γραμματοσειρές που περιέχονται στο αρχείο στο φάκελο /fonts, ο οποίος θα πρέπει να βρίσκεται στον ίδιο κατάλογο με τον φάκελο /css του ιστότοπού σας HTML.

Τυπική σύνδεση των ληφθέντων γραμματοσειρώνφαίνεται έτσι

@font-face ( font-family: "Font_name_any"; src: url("Font_file_name.eot"); src: url("Font_file_name.eot?#iefix") format("embedded-opentype"), url_file_ont .woff") format("woff"), url("FontFileName.ttf") format("truetype"), url("FontFileName.svg#DSNoteRegular") format("svg"); βάρος γραμματοσειράς: κανονική; γραμματοσειρά -στυλ: κανονικό;)

Στην περίπτωσή μου η σύνδεση θα μοιάζει με αυτό

/* Κωδικός για τη συμπερίληψη γραμματοσειράς στο /css/style.css */ @font-face ( font-family: "RobotoRegular"; url("../fonts/RobotoRegular.ttf") μορφή ("truetype"); γραμματοσειρά- στυλ: κανονικό, βάρος γραμματοσειράς: κανονικό; )

Για να συνδέσετε τη γραμματοσειρά της επιλογής σας στον ιστότοπο, μεταβείτε στην καρτέλα ενθέτω, εκεί θα δείτε 2 τρόπους σύνδεσης:

1 ΠΡΟΤΥΠΟ

Αυτός ο κωδικός πρέπει να προστεθεί στην ενότητα το έγγραφό σας HTML.

2. @IMPORT

@import url("https://fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic");

Σπουδαίος. Ανεξάρτητα από τη μέθοδο σύνδεσης, χρησιμοποιήστε τους ακόλουθους κανόνες CSS για να ορίσετε αυτές τις οικογένειες: font-family: 'Roboto', sans-serif; περισσότερα για αυτό παρακάτω.

Χορηγός Υλικού.
Κλιματιστικά στο ηλεκτρονικό κατάστημα http://www.technodom.kz/catalog/konditsionery. Κλιματιστικά - τα καλύτερα προϊόντα, δανεισμός, τεράστια ποικιλία, άψογη εξυπηρέτηση.

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

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

Μία από τις δυνατότητες οπτικής βελτίωσης της αναγνωσιμότητας των κειμένων είναι η συμπερίληψη γραμματοσειρών τρίτων. Εξάλλου, όλοι πιθανότατα γνωρίζουν τι είναι μια «κακή» τυπική συλλογή κυριλλικών γραμματοσειρών στα Windows, η οποία είναι υπεύθυνη για την εμφάνιση κειμένου στο πρόγραμμα περιήγησης.

Τυπικές γραμματοσειρές:

Cufon και @font-face

Νωρίτερα, έγραψα ήδη σχετικά με τη χρήση των οποίων μπορείτε να συνδέσετε μη τυπικές γραμματοσειρές στον ιστότοπο. Και τώρα ας δούμε έναν ευκολότερο τρόπο - αυτός είναι ο κανόνας @font-face στο css και η φόρτωση της ίδιας της γραμματοσειράς από το κατάστημα γραμματοσειρών Google Fonts.

Η όλη διαφορά μεταξύ Cufon και @font-face είναι ότι το πρώτο χρησιμοποιεί js για να μιμηθεί τη γραμματοσειρά και σχεδιάζει χαρακτήρες με δικά του μέσα, ενώ το @font-face φορτώνει τη γραμματοσειρά από μόνη της στον υπολογιστή του επισκέπτη και το πρόγραμμα περιήγησης τη χρησιμοποιεί ήδη για να εμφανίσει κείμενο.

Σε κάθε περίπτωση, το Cufon και το @font-face επιβραδύνουν τη φόρτωση του ιστότοπου, αν και όχι σημαντικά.

Χρήση γραμματοσειρών Google σε ιστότοπο

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

Όπως μπορείτε να δείτε, οι επικεφαλίδες και οι υπότιτλοι των άρθρων μου γίνονται με μη τυποποιημένη γραμματοσειρά, τώρα στην πράξη θα δείξω πώς να το κάνετε αυτό και θα το δοκιμάσετε στους ιστοτόπους σας κατ' αναλογία.

Επιλογή γραμματοσειράς στο αποθετήριο

Για να μην τρομάξω, θα εξηγήσω - το αποθετήριο είναι αποθετήριο, αλλά με αστικό τρόπο :). Και έτσι, ας πάμε στο http://www.google.com/fonts/και αναζητήστε μια κατάλληλη γραμματοσειρά για τον εαυτό σας:

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

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

Σύνδεση της γραμματοσειράς στον ιστότοπο

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

Παρακάτω υπάρχει ένας πίνακας με επιλογή "τύπου οθόνης", επιλέξτε Λατινικά (λατινικά) και Κυριλλικά (κυριλλικά), τα οποία θα μας δώσουν τη δυνατότητα να εμφανίσουμε τόσο λατινικά όσο και κυριλλικά γράμματα:

Μετά από αυτό, προχωράμε στο τρίτο σημείο αυτής της σελίδας, δηλαδή στην ίδια τη σύνδεση. Η Google μας προσφέρει τρεις επιλογές για την ενσωμάτωση των γραμματοσειρών της - μέσω js, ο τυπικός τρόπος είναι μέσω σύνδεσης με και @import σε αρχείο css. Χρησιμοποιώ τον τελευταίο τρόπο.

Ανοίξτε το αρχείο css και γράψτε τη γραμμή που μας έδωσε η google:

Αυτό ήταν όλο, συνδέσαμε τη γραμματοσειρά από το Google Fonts στον ιστότοπο, τώρα πώς να τη χρησιμοποιήσετε;

Χρήση σε CSS

Όλα είναι πολύ απλά, αφού συνδέσουμε τη γραμματοσειρά μέσω @import , πρέπει να γράψουμε τυπικές οδηγίες για εκείνες τις κλάσεις και τα αναγνωριστικά που θα χρησιμοποιήσουν τη νέα μας γραμματοσειρά. Για παράδειγμα:

h1, h2, h3 (οικογένεια γραμματοσειράς: 'Cuprum', sans-serif;)

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

Αυτό είναι όλο, σας ευχαριστώ για την προσοχή σας και τα λέμε σύντομα.

Γεια σε όλους! Σχετικά με αυτό, έγραψα στο μάθημα 132, μπορείτε να διαβάσετε. Και σε αυτό το άρθρο, θα σας πω πώς μπορείτε εύκολα και γρήγορα να συνδέσετε μια γραμματοσειρά στον ιστότοπό σας από το Google Fonts. Στην υπηρεσία Google Font, πρέπει να επιλέξετε μια γραμματοσειρά για τον ιστότοπό σας και, στη συνέχεια, να τη συνδέσετε.

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

Πώς να συνδέσετε τις γραμματοσειρές Google στον ιστότοπο

Πηγαίνουμε στην υπηρεσία Google Font σε αυτόν τον σύνδεσμο και επιλέγουμε τη γραμματοσειρά που χρειαζόμαστε.
Οι γραμματοσειρές μπορούν να επιλεγούν μέσω του φίλτρου. Δηλαδή, ορίζουμε τις παραμέτρους, και έτσι η υπηρεσία βρίσκει γραμματοσειρές με τις επιλεγμένες παραμέτρους.

Μπορείτε να ορίσετε άλλες παραμέτρους εάν θέλετε: πάχος (πάχος γραμματοσειράς), κλίση (πλάγια), πλάτος (πλάτος γραμματοσειράς).

Πρέπει επίσης να επιλέξετε Κυριλλικό εάν ο ιστότοπός σας είναι στα ρωσικά: κυριλλικό (κυριλλικό) ή κυριλλικό εκτεταμένο (κυριλλικό εκτεταμένο).

Όταν επιλεγούν οι επιλογές, η υπηρεσία θα εμφανίσει όλες τις γραμματοσειρές που είναι με αυτές.

Φέρνουμε τον κέρσορα του ποντικιού στη γραμματοσειρά που θέλουμε να εγκαταστήσουμε στον ιστότοπο, μετά την οποία εμφανίζονται πρόσθετες ρυθμίσεις / παράμετροι: Γρήγορη χρήση (γρήγορη χρήση), Αναδυόμενος (προβολή της γραμματοσειράς σε ξεχωριστό παράθυρο) και Προσθήκη στη συλλογή (προσθήκη στη συλλογή).

επιλέξτε " Γρήγορη χρήση» και δείτε ένα widget με τη μορφή ταχύμετρου στη δεξιά πλευρά. Δείχνει πόσο γρήγορα φορτώνεται η επιλεγμένη γραμματοσειρά. Όσο χαμηλότερος είναι ο αριθμός σε αυτό το ταχύμετρο, τόσο το καλύτερο.

Ακόμη χαμηλότερα, μπορείτε να επιλέξετε μία από τις τρεις επιλογές για την εγκατάσταση της γραμματοσειράς στον ιστότοπο: standart, @import ή javascript.

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

Αντιγράψτε τη γραμμή που επισημαίνεται με κόκκινο και, στη συνέχεια, επικολλήστε την στο αρχείο header.php ανάμεσα στις ετικέτες ….

Στη συνέχεια ανοίγουμε το αρχείο στυλ style.css, βρίσκουμε τη γραμματοσειρά που πρέπει να αλλάξει και γράφουμε μια νέα. Απλώς πληκτρολογήστε το όνομα της νέας γραμματοσειράς. Βάζουμε τη γραμματοσειρά Google Fonts σε εισαγωγικά, για παράδειγμα, γραμματοσειρά-οικογένεια: "Aladin",Arial,Helvetica,Sans-serif.

Αν δεν καταλαβαίνετε τίποτα απολύτως, για τι μιλάω εδώ, τότε δείτε το βίντεο όπου μιλάω αναλυτικά, πώς να συνδέσετε τη γραμματοσειρά γραμματοσειράς google με τον ιστότοπο wordpress

______________________
Μάθημα 204. αλλά χωρίς το πρόσθετο