Οι γραμματοσειρές επιβραδύνουν την απόδοση του ιστότοπού σας; Βελτιστοποιήστε το χρόνο φόρτωσης της γραμματοσειράς της εφαρμογής σας χρησιμοποιώντας αυτό το πακέτο.
Ίσως θέλετε να χρησιμοποιήσετε προσαρμοσμένες γραμματοσειρές για να κάνετε την εφαρμογή Next.js πιο ελκυστική οπτικά. Η χρήση προσαρμοσμένων γραμματοσειρών μπορεί να βελτιώσει σημαντικά την εμφάνιση και την αίσθηση του ιστότοπού σας, αλλά μπορεί επίσης να επιβραδύνει την απόδοση του ιστότοπού σας εάν δεν βελτιστοποιηθεί σωστά. ο @next/font πακέτο είναι μια λύση σε αυτό το πρόβλημα.
Το πακέτο @next/font παρέχει έναν απλό και αποτελεσματικό τρόπο βελτιστοποίησης της φόρτωσης γραμματοσειρών στο Next.js, βελτιώνοντας τον χρόνο φόρτωσης της σελίδας και τη συνολική απόδοση. Αυτό το άρθρο παρέχει πληροφορίες σχετικά με τον τρόπο χρήσης του @next/font στο έργο Next.js.
Εγκατάσταση του πακέτου
Μπορείτε να εγκαταστήσετε το @next/font πακέτο εκτελώντας την ακόλουθη εντολή στο τερματικό σας:
npm εγκατάσταση @next/font
Εάν χρησιμοποιείτε νήμα, μπορείτε να εγκαταστήσετε το πακέτο εκτελώντας αυτήν την εντολή:
νήμα προσθήκη @next/font
Χρησιμοποιώντας το @next/font για να βελτιστοποιήσετε τις γραμματοσειρές Google
ο @next/font πακέτο βελτιστοποιεί τη χρήση των γραμματοσειρών Google. ο @next/font φιλοξενεί αυτόματα τις γραμματοσειρές Google στον διακομιστή Next.js, έτσι ώστε να μην αποστέλλεται αίτημα στην Google για λήψη των γραμματοσειρών.
Για να χρησιμοποιήσετε μια γραμματοσειρά Google στην εφαρμογή σας, θα εισαγάγετε τη γραμματοσειρά ως συνάρτηση από @next/font/google μέσα στο _app.js αρχείο στο σελίδες Ευρετήριο:
εισαγωγή { Roboto } από'@next/font/google'συνθ roboto = Roboto({ υποσύνολα: ['λατινικά'] })
εξαγωγήΠροκαθορισμένολειτουργίαMyApp({ Component, pageProps }) {
ΕΠΙΣΤΡΟΦΗ (
)
}
Στο μπλοκ κώδικα παραπάνω, δημιουργήσατε μια μεταβλητή γραμματοσειρά χρησιμοποιώντας το Ρομπότ λειτουργία γραμματοσειράς. ο υποσύνολο Η ιδιότητα υποσυνθέτει τη γραμματοσειρά μόνο στους λατινικούς χαρακτήρες. εάν χρησιμοποιείτε άλλη γλώσσα, μπορείτε να ορίσετε τη γραμματοσειρά σε αυτήν τη γλώσσα.
Μπορείτε επίσης να καθορίσετε το βάρος της γραμματοσειράς μαζί με το στυλ γραμματοσειράς κατά τον ορισμό της γραμματοσειράς:
συνθ roboto = Roboto(
{
υποσύνολα: ['λατινικά'],
βάρος: '400',
στυλ: 'πλάγιο'
}
)
Καθορίζετε πολλά βάρη γραμματοσειρών και στυλ γραμματοσειράς χρησιμοποιώντας πίνακες.
Για παράδειγμα:
συνθ roboto = Roboto(
{
υποσύνολα: ['λατινικά'],
βάρος: ['400', '500', '700'],
στυλ: ['πλάγιο', 'κανονικός']
}
)
Στη συνέχεια, θα τυλίξετε τα εξαρτήματά σας σε ένα κύριος επισημάνετε και περάστε τη γραμματοσειρά ως κλάση στο κύριος ετικέτα:
εισαγωγή { Roboto } από'@next/font/google'συνθ roboto = Roboto(
{
υποσύνολα: ['λατινικά'],
βάρος: ['400', '500', '600'],
στυλ: ['πλάγιο', 'κανονικός']
}
)
εξαγωγήΠροκαθορισμένολειτουργίαMyApp({ Component, pageProps }) {
ΕΠΙΣΤΡΟΦΗ (
</main>
)
}
Η απόδοση της εφαρμογής σας με το μπλοκ κώδικα παραπάνω θα εφαρμόσει τη γραμματοσειρά σε ολόκληρη την εφαρμογή σας. Εναλλακτικά, μπορείτε να εφαρμόσετε τη γραμματοσειρά σε μία μόνο σελίδα. Για να το κάνετε αυτό, προσθέτετε τη γραμματοσειρά σε μια συγκεκριμένη σελίδα.
Όπως έτσι:
εισαγωγή { Roboto } από'@next/font/google'συνθ roboto = Roboto(
{
υποσύνολα: ['λατινικά'],
βάρος: ['400', '500', '600'],
στυλ: ['πλάγιο', 'κανονικός']
}
)
εξαγωγήΠροκαθορισμένολειτουργίαΣπίτι() {
ΕΠΙΣΤΡΟΦΗ (Γεια σας!!!</p>
</div>
)
}
Χρησιμοποιώντας το @next/font για βελτιστοποίηση τοπικών γραμματοσειρών
ο @next/font Το πακέτο βελτιστοποιεί επίσης τη χρήση των τοπικών γραμματοσειρών. Η τεχνική της βελτιστοποίησης τοπικών γραμματοσειρών μέσω του @next/font Το πακέτο είναι αρκετά παρόμοιο με τη βελτιστοποίηση των γραμματοσειρών Google, με ανεπαίσθητες διαφορές.
Για να βελτιστοποιήσετε τις τοπικές γραμματοσειρές, χρησιμοποιήστε το localFont λειτουργία που παρέχεται από το @next/font πακέτο. Εισάγετε το localFont λειτουργία από @next/font/local και μετά ορίστε τη μεταβλητή γραμματοσειρά σας πριν χρησιμοποιώντας τη γραμματοσειρά στην εφαρμογή Next.js.
Όπως έτσι:
εισαγωγή localFont από'@next/font/local'συνθ myFont = localFont({ src: "./my-font.woff2" })
εξαγωγήΠροκαθορισμένολειτουργίαMyApp({ Component, pageProps }) {
ΕΠΙΣΤΡΟΦΗ (
</main>
)
}
Εσείς ορίζετε τη μεταβλητή γραμματοσειρά myFont χρησιμοποιώντας την localFont λειτουργία. ο localFont Η συνάρτηση παίρνει ένα αντικείμενο ως όρισμα. Το αντικείμενο έχει μια ενιαία ιδιότητα, src, το οποίο ορίζεται στη διαδρομή αρχείου του αρχείου γραμματοσειράς στο WOFF2 μορφή "./my-font.woff2".
Μπορείτε να χρησιμοποιήσετε πολλά αρχεία γραμματοσειρών για μια οικογένεια γραμματοσειρών. Για να το κάνετε αυτό, ορίζετε το src ιδιότητα σε έναν πίνακα που περιέχει αντικείμενα των διαφορετικών γραμματοσειρών και τις ιδιότητές τους.
Για παράδειγμα:
συνθ myFont = localFont(
{
src: [
{
μονοπάτι: './Roboto-Regular.woff2',
βάρος: '400',
στυλ: 'κανονικός',
},
{
μονοπάτι: "./Roboto-Italic.woff2",
βάρος: '400',
στυλ: 'πλάγιο',
},
{
μονοπάτι: './Roboto-Bold.woff2',
βάρος: '700',
στυλ: 'κανονικός',
},
{
μονοπάτι: "./Roboto-BoldItalic.woff2",
βάρος: '700',
στυλ: 'πλάγιο',
},
]
}
)
Χρήση του @next/font With Tailwind CSS
Για να χρησιμοποιήσετε το @next/font πακέτο με Tailwind CSS, πρέπει να χρησιμοποιήσετε μεταβλητές CSS. Για να το κάνετε αυτό, θα ορίσετε τη γραμματοσειρά σας χρησιμοποιώντας το Google ή τις τοπικές γραμματοσειρές και στη συνέχεια θα φορτώσετε τη γραμματοσειρά σας με την επιλογή μεταβλητής για να καθορίσετε το όνομα της μεταβλητής CSS.
Για παράδειγμα:
εισαγωγή { Μεταξύ } από'@next/font/google'συνθ inter = Inter({
υποσύνολα: ['λατινικά'],
μεταβλητός: '--font-inter',
})
εξαγωγήΠροκαθορισμένολειτουργίαMyApp({ Component, pageProps }) {
ΕΠΙΣΤΡΟΦΗ (`${inter.variable} font-sans».}>
</main>
)
}
Στο μπλοκ κώδικα παραπάνω, δημιουργήσατε τη γραμματοσειρά, μεταξύ, και ορίστε τη μεταβλητή σε -- γραμματοσειρά-inter. ο όνομα τάξης του κύριου στοιχείου ορίζεται στη συνέχεια στη μεταβλητή γραμματοσειρά και font-sans. ο δια.μεταβλητή τάξη θα εφαρμόσει το μεταξύ γραμματοσειρά στη σελίδα και το font-sans η τάξη θα εφαρμόσει την προεπιλεγμένη γραμματοσειρά sans-serif.
Στη συνέχεια, προσθέτετε τη μεταβλητή CSS στο αρχείο διαμόρφωσης tailwind tailwind.config.cjs:
/** @τύπος {import('tailwindcss'). Config}*/
μονάδα μέτρησης.εξαγωγές = {
περιεχόμενο: ["./index.html",
"./src/**/*.{js, ts, jsx, tsx}",],
θέμα: {
επέκταση: {
fontFamily: {
χωρίς: ['var(--font-inter)'],
},
},
},
πρόσθετα: [],
}
Τώρα μπορείτε να εφαρμόσετε τη γραμματοσειρά στην εφαρμογή σας χρησιμοποιώντας το font-sans τάξη.
Βελτιστοποίηση γραμματοσειράς με @next/font
Το πακέτο @next/font είναι ένας απλός και αποτελεσματικός τρόπος βελτιστοποίησης της φόρτωσης γραμματοσειρών στο Next.js. Αυτό το πακέτο διασφαλίζει ότι οι προσαρμοσμένες γραμματοσειρές σας φορτώνονται αποτελεσματικά, βελτιώνοντας την απόδοση του ιστότοπού σας και την εμπειρία χρήστη. Αυτό το άρθρο παρέχει πληροφορίες σχετικά με τον τρόπο ρύθμισης του πακέτου @next/font και χρήσης του στην εφαρμογή Next.js. Μπορείτε να βελτιώσετε περαιτέρω την απόδοση του ιστότοπού σας βελτιστοποιώντας τις εικόνες.