Οι προσαρμοσμένες γραμματοσειρές είναι από τις πλέον ενδεχομένως ελκυστικές πτυχές του CSS3 για τους σχεδιαστές. Με τον κανόνα γραμματοσειράς , μπορείτε να προβάλετε οποιαδήποτε γραμματοσειρά έχετε στο διαδίκτυο στο κείμενο της ιστοσελίδας σας, ανεξάρτητα από το αν ο χρήστης έχει εγκαταστήσει ή όχι.
Όπως συμβαίνει με τις περισσότερες τεχνικές CSS3, ο βασικός κώδικας είναι αρκετά απλός, αλλά η πρακτική πραγματικότητα είναι λίγο πιο περίπλοκη.
Σε αυτό το σύντομο σεμινάριο, θα εκτελέσουμε τα βασικά στοιχεία της συμπερίληψης προσαρμοσμένων γραμματοσειρών στις σελίδες σας.
Πρώτον, βεβαιωθείτε ότι η γραμματοσειρά που θέλετε να χρησιμοποιήσετε έχει άδεια χρήσης για χρήση στο διαδίκτυο. Σχεδόν όλες οι δωρεάν γραμματοσειρές μπορούν να χρησιμοποιηθούν σε έναν ιστότοπο και πολλές γραμματοσειρές υψηλής ποιότητας είναι διαθέσιμες με μια άδεια που καλύπτει τη χρήση του διαδικτύου.
Στη συνέχεια μεταφορτώστε τη γραμματοσειρά που επιλέξατε στον διακομιστή σας. Μπορεί να θέλετε να το αποθηκεύσετε σε έναν ειδικό κατάλογο "γραμματοσειρών", αλλά αυτό είναι προαιρετικό.
Θυμηθείτε να συμπεριλάβετε τα αρχεία για τυχόν παραλλαγές της γραμματοσειράς που σχεδιάζετε να χρησιμοποιήσετε, όπως έντονη ή πλάγια γραφή. Μπορείτε να χρησιμοποιήσετε τα αρχεία EOT (Embedded OpenType) για τον Internet Explorer και είτε OTF (OpenType) είτε TTF (TrueType) για τα υπόλοιπα. (Οι πρόσθετες επιλογές περιλαμβάνουν το WOFF (Web Open Font Format) και το SVG (Scalable Vector Graphics), αλλά θα παραμείνουμε στους πιο κοινούς τύπους εδώ.)
Σημειώστε πού αποθηκεύονται τα αρχεία γραμματοσειράς στον διακομιστή σας.
Ανοίξτε το αρχείο HTML ή CSS για τη σελίδα με την οποία εργάζεστε. Προσθέστε μια δήλωση γραμματοσειράς-προσώπου στον κώδικα στυλ:
@font-face {}Πρώτα μέσα στην ενότητα γραμματοσειράς-προσώπου , δώστε στη γραμματοσειρά ένα όνομα που μπορείτε αργότερα να το χρησιμοποιήσετε για να το αναφέρετε:
font-family: 'lovelyFont';Στη συνέχεια, ακόμα μέσα στο τμήμα γραμματοσειράς-προσώπου , δώστε τη θέση του αρχείου EOT:
src: url('fonts/lovely_font.eot');Αλλάξτε τη θέση και το όνομα της γραμματοσειράς ανάλογα με τις ανάγκες. Στη συνέχεια, προσθέστε μια γραμματοσειρά OTF ή / και TTF:
src:url('fonts/lovely_font.otf')src:url('fonts/lovely_font.ttf') Αυτά είναι τα γυμνά κόκαλα του απαραίτητου κώδικα, που σε αρκετές περιπτώσεις θα επαρκούν. Ωστόσο, υπάρχουν πρόσθετα βήματα που μπορούμε να κάνουμε για να καταστήσουμε τον κώδικα πιο αξιόπιστο. Πρώτα επεκτείνετε αυτήν την ενότητα για να συμπεριλάβετε μια ένδειξη του τύπου αρχείου γραμματοσειράς:
src:url('fonts/lovely_font.otf')format('opentype');src:url('fonts/lovely_font.ttf')format('truetype');Ως ένα άλλο προαιρετικό μέτρο απόδοσης, μπορούμε να κάνουμε το πρόγραμμα περιήγησης να ελέγξει για ένα τοπικό αντίγραφο της γραμματοσειράς σε περίπτωση που ο χρήστης το έχει ήδη. Επεκτείνετε ξανά τον κώδικα σας ως εξής, προσθέτοντας την τοπική ενότητα πριν καθορίσετε τη διεύθυνση URL, έτσι ώστε η γραμματοσειρά να μεταφορτωθεί μόνο εάν είναι απαραίτητο:
src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.otf')format('opentype');src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.ttf')format('truetype');Η προσθήκη είναι η ίδια για OTF και TTF. Καθορίζουμε το όνομα της γραμματοσειράς μετά την τοπική λέξη-κλειδί.
Σε αυτή την περίπτωση έχουμε δύο γραμμές που καθορίζουν την τοπική γραμματοσειρά επειδή το όνομα της γραμματοσειράς περιέχει περισσότερες από μία λέξεις. Η ενωμένη έκδοση εξυπηρετεί τον τρόπο με τον οποίο αποθηκεύονται τα ονόματα των γραμματοσειρών σε ορισμένα λειτουργικά συστήματα - αυτή η πρόσθετη γραμμή δεν είναι απαραίτητη εάν η γραμματοσειρά έχει μόνο μία λέξη στο όνομά της. Αν τυχαίνει να γνωρίζετε ότι μια γραμματοσειρά μπορεί να έχει διαφορετικά ονόματα σε διαφορετικά συστήματα, συμπεριλάβετε καθεμία από τις δυνατότητες του τοπικού σας τμήματος.
Τέλος, μπορούμε να εφαρμόσουμε τη γραμματοσειρά στα στοιχεία της σελίδας. Στον κώδικα CSS για ένα συγκεκριμένο στοιχείο ή ομάδα στοιχείων, ορίστε απλώς το όνομα γραμματοσειράς που χρησιμοποιήσατε, συμπεριλαμβανομένων τυχόν εναλλακτικών επιλογών που επιλέγετε:
div { font-family: 'lovelyFont', sans-serif; }Εάν, για παράδειγμα, θέλετε να χρησιμοποιήσετε μια τολμηρή έκδοση της γραμματοσειράς σας, συμπεριλάβετε απλώς μια άλλη ενότητα γραμματοσειράς με πρόσωπο με την τολμηρή διεύθυνση URL του αρχείου γραμματοσειράς και μια δήλωση με το "font-weight: bold;". Καθορίστε ένα βάρος γραμματοσειράς με έντονους χαρακτήρες για οποιοδήποτε στοιχείο με την προσαρμοσμένη γραμματοσειρά που εφαρμόζεται σε αυτό και το πρόγραμμα περιήγησης θα εμφανίσει αυτόματα την τολμηρή έκδοση:
/*default version*/@font-face {font-family: 'lovelyFont';src: url('fonts/lovely_font.eot');src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.otf')format('opentype');}/*bold version*/@font-face {font-family: 'lovelyFont';src: url('fonts/lovely_font_bold.eot');src:local('Lovely Font Bold'),local('Lovely-Font-Bold'),url('fonts/lovely_font_bold.otf')format('opentype');font-weight: bold;}/*container element*/div { font-family: 'lovelyFont', sans-serif; }/*span elements inside the container div*/span { font-weight: bold; }Αυτό είναι!
Χρησιμοποιείτε το CSS3 για να αναπτύξετε τα πρόσωπα τύπου που έχετε στη διάθεσή σας; Χρησιμοποιείτε μια υπηρεσία όπως το Typekit της Adobe ή τα Webfonts της Google; Ενημερώστε μας στα σχόλια.
Προτεινόμενη εικόνα / μικρογραφία, εικόνα γραμματοσειράς μέσω Shutterstock.