Το @font-face είναι ένας κανόνας CSS που επιτρέπει την εμφάνιση γραμματοσειρών σε ιστοσελίδες στο διαδίκτυο. Πριν από την ύπαρξη αυτού του κανόνα, οι διαχειριστές ιστοσελίδων μπορούσαν να χρησιμοποιούν ένα περιορισμένο σύνολο γραμματοσειρών στις ιστοσελίδες τους, οι οποίες είναι οι πιο συνηθισμένες και εγκατεστημένες στους υπολογιστές των χρηστών. Με την έλευση του @font-face, οποιαδήποτε συγκεκριμένη γραμματοσειρά μπορεί εύκολα να προσαρτηθεί σε έναν ιστότοπο.
Αν κατεβάσατε τη γραμματοσειρά από τον ιστότοπό μας, στο αρχείο με τις γραμματοσειρές θα βρείτε έτοιμο κώδικα CSS, τον οποίο θα πρέπει να αντιγράψετε και να τοποθετήσετε στο έγγραφο CSS που επισυνάπτεται στο έργο.
Εγκατάσταση βήμα προς βήμα
1. Επιλέξτε τη γραμματοσειρά που θέλετε και κάντε κλικ στο "λήψη για τον ιστότοπο".
2. Στη ρίζα του ιστότοπού σας δημιουργήστε έναν φάκελο fonts και αντιγράψτε τις γραμματοσειρές που κατεβάσατε.
Ανοίξτε το έγγραφο CSS σας και αντιγράψτε το περιεχόμενο του αρχείου κειμένου από το αρχείο σε αυτό.
4. Βεβαιωθείτε ότι η διαδρομή προς το φάκελο γραμματοσειράς είναι σωστά γραμμένη. Ανάλογα με τη θέση του φακέλου όπου βρίσκονται οι γραμματοσειρές, η διαδρομή μπορεί να περιέχει μία ή περισσότερες τελείες.
5. Έγινε. Αντιγράψτε την ιδιότητα με το όνομα της οικογένειας και επικολλήστε την στον επιλογέα για τον οποίο γράφετε τα στυλ.
Τι γίνεται αν έχω ήδη κατεβάσει τη γραμματοσειρά από αλλού και θέλω να τη συνδέσω;
Σε αυτή την περίπτωση, πρέπει να βρείτε έναν μετατροπέα γραμματοσειρών στο διαδίκτυο και να μετατρέψετε τη γραμματοσειρά ttf (ή otf) σας στις σωστές μορφές, δηλαδή eot, svg, woff και woff2. Αυτό γίνεται για να διασφαλιστεί ότι η γραμματοσειρά εμφανίζεται και λειτουργεί σωστά σε όλα τα προγράμματα περιήγησης, καθώς και σε κινητές συσκευές.
Στη συνέχεια, πρέπει να διευκρινίσετε τον κανόνα @font-face μόνοι σας, τηρώντας τη σύνταξή του.
Η σύνταξη για το @font-face
Η σύνταξη του κανόνα μπορεί να χωριστεί χονδρικά σε βασικές ιδιότητες και σε προχωρημένες ιδιότητες.
Βασικό:
- font-family - καθορίζει το όνομα της γραμματοσειράς.
- src - υποδεικνύει τη διαδρομή της γραμματοσειράς. Αυτό μπορεί να είναι η διεύθυνση URL της γραμματοσειράς που βρίσκεται στο διακομιστή του ιστότοπού σας, διευθύνσεις URL γραμματοσειρών που βρίσκονται στο διακομιστή κάποιου άλλου (όπως το Google Fonts) ή απλώς το όνομα της γραμματοσειράς που βρίσκεται στον υπολογιστή του χρήστη (Helvetica New Bold, Tahoma, Georgia κ.λπ.) .
Επεκτείνεται:
- font-display - καθορίζει τον τρόπο με τον οποίο θα εμφανίζεται η γραμματοσειρά, ανάλογα με το αν έχει ληφθεί και είναι έτοιμη για χρήση.
- font-stretch - σας επιτρέπει να ρυθμίζετε το πλάτος του κειμένου.
- font-style - καθορίζει αν η γραμματοσειρά είναι απλή, πλάγια ή λοξή (οι δύο τελευταίες δεν είναι το ίδιο).
- font-weight - Ρυθμίζει τον κορεσμό της γραμματοσειράς, σε μια κλίμακα από 100 έως 900 (100-μικρό, 900-μικρό).
- font-variant - καθορίζει τον τρόπο παρουσίασης των πεζών γραμμάτων - αφήστε τα αμετάβλητα ή κάντε τα όλα πεζά (κεφαλαία).
- font-feature-settings - σας επιτρέπει να διαχειρίζεστε προηγμένα τυπογραφικά χαρακτηριστικά σε γραμματοσειρές OpenType.
- font-variations-settings - επιτρέπει τον έλεγχο χαμηλού επιπέδου σε παραλλαγές γραμματοσειρών Open Type και TrueType, καθορίζοντας ονόματα αξόνων τεσσάρων γραμμάτων.
- unicode-range - καθορίζει το εύρος των κωδικών Unicode (γλυφών) που θα χρησιμοποιηθούν στη γραμματοσειρά.
Σύνδεση μιας γραμματοσειράς στον ιστότοπό σας με τις γραμματοσειρές της Google
Η χρήση των γραμματοσειρών Google Fonts είναι ο ευκολότερος τρόπος για να συνδέσετε μια γραμματοσειρά με τον ιστότοπό σας. Μεταβείτε στον ιστότοπό τους, βρείτε τη γραμματοσειρά που θέλετε, επιλέξτε τις σωστές γραμματοσειρές για εγκατάσταση και αντιγράψτε τον κώδικα.
Ο αντιγραμμένος κώδικας θα πρέπει να τοποθετηθεί στο σώμα της ετικέτας head, στη σελίδα html.
Μειονέκτημα αυτής της μεθόδου είναι ότι αν κατά τη διάρκεια της κατασκευής του ιστότοπου έχετε χάσει το διαδίκτυο - οι γραμματοσειρές δεν θα εμφανιστούν και θα αντικατασταθούν από τυποποιημένες, επειδή τα αρχεία δεν βρίσκονται στον τοπικό υπολογιστή, αλλά στους διακομιστές της Google. Επίσης, οι πιθανότητες είναι ότι όταν έρχεστε στον πελάτη για μια παρουσίαση της διάταξης (ή απλώς για ενημέρωση) και αυτός δεν έχει Wi-Fi, το πρόβλημα θα συμβεί ξανά.
