Αυτό το ιστολόγιο θα μιλήσει για τη χρήση του κανόνα CSS @font-face.
Τι είναι ο κανόνας CSS @font-face;
Ο κανόνας @font-face στο CSS χρησιμοποιείται για τη δημιουργία προσαρμοσμένων γραμματοσειρών για τα έργα μας. Αυτές οι γραμματοσειρές μπορούν να φορτωθούν από τον διακομιστή ή τις εγκατεστημένες γραμματοσειρές του συστήματος.
Πώς να χρησιμοποιήσετε τον κανόνα CSS @font-face;
Η σύνταξη για τη χρήση του κανόνα CSS @font-face αναφέρεται παρακάτω:
@font-face {
γραμματοσειρά-οικογένεια : MyNewFont ;
src : url ( )
}
Ο κανόνας @font-face ορίζεται καθορίζοντας μια τιμή στην ιδιότητα font-family και τη σχετική διεύθυνση URL από όπου βρίσκεται αυτή η γραμματοσειρά ως χαρακτηριστικό src.
Παράδειγμα
Στο παρακάτω παράδειγμα, θα προσαρμόσουμε τις γραμματοσειρές. Για να το κάνετε αυτό, πρώτα, κατεβάστε τις γραμματοσειρές από το πρόγραμμα περιήγησης και προσθέστε τις στο φάκελο του έργου σας. Μπορείτε επίσης να χρησιμοποιήσετε συνδέσμους εάν χρησιμοποιείτε γραμματοσειρές από τον διακομιστή.
Αρχικά, προσθέστε ετικέτες
και και, στη συνέχεια, εφαρμόστε για να προσαρμόσετε τις γραμματοσειρές σε καθεμία από αυτές. Ας εφαρμόσουμε το σενάριο που περιγράφηκε παραπάνω σε τρία βήματα.
Βήμα 1: Προσθήκη στοιχείων σε αρχείο HTML
Βήμα 1: Προσθήκη στοιχείων σε αρχείο HTML
Σε HTML, μέσα στην ενότητα
, προσθέστε τα και για να προσθέσετε κάποιο περιεχόμενο που σχετίζεται με την ιστοσελίδα:
< h2 > Καλώς ήρθατε στο Linuxhint! < / h2 >
< h1 > Καλώς ήρθατε στο Linuxhint! < / h1 >
Βήμα 2: Καθορίστε τον κανόνα @font-face στο CSS
< h2 > Καλώς ήρθατε στο Linuxhint! < / h2 >
< h1 > Καλώς ήρθατε στο Linuxhint! < / h1 >
Βήμα 2: Καθορίστε τον κανόνα @font-face στο CSS
Για να καθορίσετε τον κανόνα, η λέξη-κλειδί ' @font-face ' χρησιμοποιείται στο CSS. Μέσα στις σγουρές αγκύλες του, προσθέστε την ιδιότητα font-family και προσθέστε το όνομα της γραμματοσειράς ως τιμή. Στη συνέχεια, χρησιμοποιήστε την ιδιότητα src για να καθορίσετε τη διαδρομή URL της γραμματοσειράς που έχετε λάβει:
@font-face {
γραμματοσειρά-οικογένεια : myfont ;
src : url ( '/fonts/Batuphat\ Script.otf' ) ;
}
Ομοίως, θα προσθέσουμε ένα άλλο προσαρμοσμένο μπλοκ γραμματοσειρών:
@font-face {γραμματοσειρά-οικογένεια : myfont2 ;
src : url ( '/fonts/Olive_Vine\ DEMO.otf' ) ;
}
Τώρα, εφαρμόστε το στυλ στα στοιχεία
και .
Στοιχείο στυλ h2
h2 {
γραμματοσειρά-οικογένεια : myfont ;
μέγεθος γραμματοσειράς : 50 εικονοστοιχεία ;
}
Στοιχείο στυλ h2
h2 {γραμματοσειρά-οικογένεια : myfont ;
μέγεθος γραμματοσειράς : 50 εικονοστοιχεία ;
}
Οι ιδιότητες που εφαρμόζονται στο στοιχείο
εξηγούνται παρακάτω:
- ' γραμματοσειρά-οικογένεια Το ' ορίζεται με την τιμή ' myfont ” που είναι αυτό που έχουμε δηλώσει στον κανόνα @font-face.
- ' μέγεθος γραμματοσειράς Η ιδιότητα ” ορίζει το μέγεθος της γραμματοσειράς σε 50 px.
Στοιχείο στυλ h1
h1 {
γραμματοσειρά-οικογένεια : myfont2 ;
μέγεθος γραμματοσειράς : 70 εικονοστοιχεία ;
χρώμα : καφέ ;
}
Εδώ το ' χρώμα Η ιδιότητα ' χρησιμοποιείται για το χρωματισμό της γραμματοσειράς.
Μπορεί να φανεί από την παρακάτω εικόνα ότι οι ετικέτες
και έχουν διαμορφωθεί επιτυχώς με τις γραμματοσειρές που δηλώθηκαν πρόσφατα:
Παρέχουμε τη μέθοδο για τη χρήση του κανόνα CSS @font-face.
συμπέρασμα
Τα στυλ γραμματοσειράς παίζουν σημαντικό ρόλο στο να κάνουν οποιαδήποτε εφαρμογή αισθητικά ελκυστική. Το σύστημά μας έχει περιορισμένα στυλ γραμματοσειράς, ενώ ένας προγραμματιστής χρειάζεται διαφορετικές γραμματοσειρές για να προσθέσει ωραιοποίηση στις εφαρμογές ιστού του. Για να γίνει αυτό, το CSS μας επιτρέπει να χρησιμοποιήσουμε τον κανόνα @font-face για την προσθήκη προσαρμοσμένων γραμματοσειρών. Αυτό το άρθρο έχει δείξει τον κανόνα @font-face μέσω του οποίου μπορείτε να προσαρμόσετε το στυλ γραμματοσειράς στην εφαρμογή μας.