Οι γραμματοσειρές Ιστού είναι ένας πολύ καλός τρόπος για να προσθέσετε προσαρμοσμένες γραμματοσειρές στον ιστότοπό σας. Αυτές οι γραμματοσειρές ενδέχεται να μην είναι διαθέσιμες στο σύστημα ενός χρήστη, επομένως πρέπει να τις συμπεριλάβετε στο έργο σας φιλοξενώντας τις ή αναφέροντάς τις μέσω ενός CDN.
Μάθετε πώς να συμπεριλάβετε γραμματοσειρές ιστού σε έναν ιστότοπο Next.js χρησιμοποιώντας αυτές τις δύο μεθόδους.
Χρήση γραμματοσειρών που φιλοξενούνται από το χρήστη στο Next.js
Για να προσθέσετε αυτο-φιλοξενούμενες γραμματοσειρές στο Next.js, πρέπει χρησιμοποιήστε τον κανόνα @font-face CSS. Αυτός ο κανόνας σάς επιτρέπει να προσθέσετε προσαρμοσμένες γραμματοσειρές σε μια ιστοσελίδα.
Πριν χρησιμοποιήσετε το font-face, πρέπει να κάνετε λήψη των γραμματοσειρών που θέλετε να χρησιμοποιήσετε. Υπάρχουν πολλά ιστοσελίδες στο διαδίκτυο που προσφέρουν δωρεάν γραμματοσειρές, συμπεριλαμβανομένων των ιστοσελίδων γραμματοσειρών Google, fontspace και dafont.
Μόλις κάνετε λήψη των γραμματοσειρών Ιστού, μετατρέψτε τις σε διαφορετικές μορφές γραμματοσειράς για να υποστηρίζουν πολλά προγράμματα περιήγησης. Μπορείς να χρησιμοποιήσεις
δωρεάν διαδικτυακά εργαλεία μετατροπής γραμματοσειρών να το πράξουν. Τα σύγχρονα προγράμματα περιήγησης ιστού υποστηρίζουν μορφές .woff και .woff2. Εάν χρειάζεται να υποστηρίζετε προγράμματα περιήγησης παλαιού τύπου, θα πρέπει επίσης να παρέχετε μορφές .eot και .ttf.Δημιουργήστε έναν νέο φάκελο που ονομάζεται γραμματοσειρές στον κατάλογο του ιστότοπού σας και αποθηκεύστε εκεί τα αρχεία γραμματοσειράς που έχετε μετατρέψει.
Το επόμενο βήμα είναι να συμπεριλάβετε τις όψεις γραμματοσειρών στο styles/global.css αρχείο για να είναι διαθέσιμα σε ολόκληρο τον ιστότοπο. Αυτό το παράδειγμα δείχνει τα πρόσωπα της γραμματοσειράς για τη γραμματοσειρά mermaid με έντονη γραφή:
@font-face {
γραμματοσειρά-οικογένεια: 'Γοργόνα';
src: url('Mermaid-Bold.εοτ');
src: url('Mermaid-Bold.eot?#iefix') μορφή('ενσωματωμένο-ανοιχτό'),
url('Mermaid-Bold.woff2') μορφή('woff2'),
url('Mermaid-Bold.woff') μορφή('woff'),
url('Mermaid-Bold.ttf') μορφή('αληθινός τύπος');
βάρος γραμματοσειράς: έντονη γραφή;
στυλ γραμματοσειράς: κανονικό;
font-display: swap;
}
Αφού συμπεριλάβετε τα αρχεία γραμματοσειρών, μπορείτε να χρησιμοποιήσετε αυτές τις γραμματοσειρές σε ένα αρχείο CSS σε επίπεδο στοιχείου:
h1 {
γραμματοσειρά-οικογένεια: Mermaid;
}Συμπεριλαμβανομένων των γραμματοσειρών Ιστού στο Next.js μέσω ενός CDN
Ορισμένοι ιστότοποι εξυπηρετούν γραμματοσειρές ιστού μέσω ενός CDN που μπορείτε να εισαγάγετε στην εφαρμογή σας. Αυτή η προσέγγιση είναι εύκολο να ρυθμιστεί επειδή δεν χρειάζεται να κάνετε λήψη γραμματοσειρών ή να δημιουργήσετε όψεις γραμματοσειρών. Επιπλέον, εάν χρησιμοποιείτε γραμματοσειρές Google ή TypeKit, το Next.js χειρίζεται αυτόματα τη βελτιστοποίηση.
Μπορείτε να προσθέσετε γραμματοσειρές από ένα CDN χρησιμοποιώντας την ετικέτα συνδέσμου ή τον κανόνα @import μέσα σε ένα αρχείο CSS.
Η ετικέτα συνδέσμου βρίσκεται πάντα μέσα στην ετικέτα κεφαλής ενός εγγράφου HTML. Για να προσθέσετε μια ετικέτα κεφαλής στο Next.js, πρέπει να δημιουργήσετε ένα προσαρμοσμένο έγγραφο. Αυτό το έγγραφο τροποποιεί την ετικέτα head and body που χρησιμοποιείται για την απόδοση κάθε σελίδας.
Ξεκινήστε να χρησιμοποιείτε αυτήν τη δυνατότητα προσαρμοσμένου εγγράφου δημιουργώντας το αρχείο /pages/_document.js.
Στη συνέχεια, συμπεριλάβετε τον σύνδεσμο προς τη γραμματοσειρά στην κεφαλή του αρχείου _document.js.
εισαγωγή Document, { Html, Head, Main, NextScript } από "Επόμενο/έγγραφο";
τάξηMyDocumentεκτείνεταιΕγγραφο{
στατικόςασυγχρονισμός getInitialProps (ctx) {
συνθ αρχικόΠροπς = αναμένω Document.getInitialProps (ctx);
ΕΠΙΣΤΡΟΦΗ { ...initialProps };
}
render() {
ΕΠΙΣΤΡΟΦΗ (
<Html>
<Κεφάλι>
<Σύνδεσμος
href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&εμφάνιση=ανταλλαγή"
rel="φύλλο στυλ"
/>
</Head>
<σώμα>
<Κύρια />
<NextScript />
</body>
</Html>
);
}
}
εξαγωγήΠροκαθορισμένο MyDocument;Πώς να χρησιμοποιήσετε τον κανόνα @import για να συμπεριλάβετε γραμματοσειρές σε ένα έργο Next.js
Μια άλλη επιλογή είναι να χρησιμοποιήσετε τον κανόνα @import στο αρχείο CSS που θέλετε να χρησιμοποιήσετε τη γραμματοσειρά.
Για παράδειγμα, κάντε τη γραμματοσειρά διαθέσιμη σε ολόκληρο το έργο εισάγοντας τη γραμματοσειρά web στο styles/global.css αρχείο.
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&εμφάνιση=ανταλλαγή');
Μπορείτε τώρα να αναφέρετε την οικογένεια γραμματοσειρών στο a Επιλογέας CSS σαν αυτό:
h1 {
γραμματοσειρά-οικογένεια:'Libre Caslon Display', serif;
}Ο κανόνας @import σάς επιτρέπει να εισάγετε μια γραμματοσειρά σε ένα περιεχόμενο αρχείο CSS. Η χρήση της ετικέτας συνδέσμου καθιστά τη γραμματοσειρά προσβάσιμη σε ολόκληρο τον ιστότοπο.
Θα πρέπει να φιλοξενήσετε γραμματοσειρές τοπικά ή να τις εισαγάγετε μέσω ενός CDN;
Οι γραμματοσειρές που φιλοξενούνται τοπικά είναι συνήθως πιο γρήγορες από τις γραμματοσειρές που εισάγονται από ένα CDN. Αυτό συμβαίνει επειδή το πρόγραμμα περιήγησης δεν χρειάζεται να υποβάλει πρόσθετο αίτημα στη γραμματοσειρά CDN μετά τη φόρτωση της ιστοσελίδας.
Εάν θέλετε να χρησιμοποιήσετε εισαγόμενες γραμματοσειρές, φορτώστε τις εκ των προτέρων για να βελτιώσετε την απόδοση του ιστότοπου. Εάν οι γραμματοσειρές είναι διαθέσιμες στις γραμματοσειρές Google ή στο Typekit, μπορείτε να τις εισαγάγετε και να επωφεληθείτε από τις δυνατότητες βελτιστοποίησης του Next.js.
