Στην ανάπτυξη ιστού, η σωστή χρήση του στυλ γραμματοσειράς παρέχει μια ελκυστική εμφάνιση στην εφαρμογή. Αυτά τα στυλ γραμματοσειράς δίνουν οπτικές ενδείξεις σχετικά με τη σειρά ανάγνωσης του εγγράφου. Για παράδειγμα, το στυλ γραμματοσειράς της επικεφαλίδας του εγγράφου πρέπει να είναι τολμηρό και σημαντικό από άλλα. Το στυλ βοηθά επίσης στη διάκριση σημαντικού περιεχομένου από άλλα.
Τα μαθησιακά αποτελέσματα αυτού του άρθρου είναι:
- Τι είναι οι γραμματοσειρές Ιστού Google;
- Πώς να εισαγάγετε γραμματοσειρές Google σε HTML;
- Πώς να χρησιμοποιήσετε τις γραμματοσειρές Google σε αρχείο CSS;
Τι είναι οι γραμματοσειρές Ιστού Google;
Η γραμματοσειρά ιστού Google είναι μια βιβλιοθήκη ανοιχτού κώδικα που περιέχει εκατοντάδες στυλ γραμματοσειράς ή οικογένειες. Παρέχει επίσης API που μας βοηθούν να χρησιμοποιούμε γραμματοσειρές Ιστού με Android και CSS. Οι γραμματοσειρές Google είναι πολύ πιο ελαφριές από άλλες βιβλιοθήκες γραμματοσειρών και διατίθενται δωρεάν για επαγγελματική χρήση. Αυτά είναι πιο εύκολο να εφαρμοστούν σε οποιονδήποτε ιστότοπο.
Από προεπιλογή, το CSS προσφέρει στυλ γραμματοσειράς fantasy, serif, Sans serif, cursive και monospace. Οι γραμματοσειρές Google μπορούν να χρησιμοποιηθούν αν θέλετε να χρησιμοποιήσετε κάποια άλλα στυλ γραμματοσειράς.
Πώς να εισαγάγετε γραμματοσειρές Google σε HTML;
Για να χρησιμοποιήσετε τις γραμματοσειρές Google σε μια σελίδα HTML, ακολουθήστε τα παρακάτω βήματα.
Βήμα 1: Επιλέξτε την Οικογένεια γραμματοσειρών
Πρώτα, ανοίξτε το Γραμματοσειρές Google επίσημη ιστοσελίδα και επιλέξτε τη γραμματοσειρά που σας αρέσει. Για παράδειγμα, επιλέξαμε το « Αστακός Δύο ” font-family:
Βήμα 2: Επιλέξτε τα Στυλ
Στη συνέχεια, κάντε κύλιση προς τα κάτω για να δείτε τη λίστα των στυλ. Προσθέστε τα στη συλλογή σας κάνοντας κλικ στο ' + ' σημάδι:
Βήμα 3: Προβολή επιλεγμένων οικογενειών
Για να δείτε τις επιλεγμένες οικογένειες, κάντε κλικ στο εικονίδιο που επισημαίνεται παρακάτω:
Βήμα 4: Αντιγράψτε τον σύνδεσμο για ενσωμάτωση στο HTML
Μετά από αυτό, κάντε κύλιση προς τα κάτω και αντιγράψτε τον σύνδεσμο της οικογένειας γραμματοσειρών χρησιμοποιώντας το επισημασμένο ' αντίγραφο εικονίδιο ':
Πώς να χρησιμοποιήσετε τις γραμματοσειρές Google στο αρχείο CSS;
Για να χρησιμοποιήσετε το αντίγραφο των γραμματοσειρών Google σε CSS για στυλ, διαβάστε τα παραδείγματα που δίνονται.
Παράδειγμα 1
Συμπεριλάβετε ένα ' ' στοιχείο για τον καθορισμό κάποιου περιεχομένου ή παραγράφου:
< Π > “Ο καλύτερος ιστότοπος εκπαιδευτικού” Π >Για να εισαγάγετε τις γραμματοσειρές Google, επικολλήστε τον αντιγραμμένο κώδικα στο ' <στυλ> ετικέτα ” του αρχείου HTML:
@ url εισαγωγής ( 'https://fonts.googleapis.com/css2?family=Lobster+Two:ital@1&display=swap' ) ;Στοιχείο στυλ «p».
Π {γραμματοσειρά-οικογένεια: 'Αστακός δύο' , διαγράμμιση;
text-align: κέντρο;
μέγεθος γραμματοσειράς: 45 px;
χρώμα: rgba ( 64 , 3 , 162 , 0,8 ) ;
}
Οι ακόλουθες επεξηγημένες ιδιότητες CSS εφαρμόζονται στο HTML ' Ετικέτα ':
- ' γραμματοσειρά-οικογένεια Το ' εκχωρείται με την τιμή ' «Αστακός Δύο», γράμμα '. Αυτή η οικογένεια γραμματοσειρών εισάγεται από το Google Fonts.
- ' στοίχιση κειμένου ” προσαρμόζει τη στοίχιση κειμένου.
- ' μέγεθος γραμματοσειράς ' καθορίζει το μέγεθος της γραμματοσειράς.
- ' χρώμα ” ορίζει το χρώμα της γραμματοσειράς.
Η εικόνα δείχνει ότι η οικογένεια γραμματοσειρών εφαρμόστηκε με επιτυχία:
Παράδειγμα 2
Ας πάρουμε ένα άλλο παράδειγμα για την εισαγωγή του ' Nerko One ” Γραμματοσειρά Google. Για το σκοπό αυτό, επικολλήστε ξανά τον κωδικό για τη διεύθυνση URL γραμματοσειράς Google 'Nerko One' στο ' <στυλ> ' στοιχείο:
@ url εισαγωγής ( 'https://fonts.googleapis.com/css2?family=Nerko+One&family=Oswald:wght@500&family=Pacifico&display=swap' ) ;Στοιχείο στυλ «p».
Π {γραμματοσειρά-οικογένεια: 'Nerko One' , διαγράμμιση;
βάρος γραμματοσειράς: 300 ;
μέγεθος γραμματοσειράς: 30 px;
}
Ο ' γραμματοσειρά-οικογένεια », « βάρος γραμματοσειράς ', και ' μέγεθος γραμματοσειράς 'Οι ιδιότητες εφαρμόζονται στο HTML' ' στοιχείο.
Παραγωγή
Σας έχουμε διδάξει πώς να εισάγετε γραμματοσειρές ιστού Google στο αρχείο CSS.
συμπέρασμα
Για να εισαγάγετε τις γραμματοσειρές Google σε CSS, επισκεφθείτε πρώτα το Γραμματοσειρές Google επίσημη ιστοσελίδα και επιλέξτε το στυλ γραμματοσειράς. Στη συνέχεια, αντιγράψτε τον κωδικό που περιέχει το ' @εισαγωγή ' λέξη-κλειδί και επικολλήστε την στο αρχείο CSS ή στο ' <στυλ> ' στοιχείο του αρχείου HTML. Αυτή η μελέτη απέδειξε την πλήρη διαδικασία εισαγωγής γραμματοσειρών Google σε ένα αρχείο CSS.