כיצד להשתמש ב-@next/font כדי לייעל גופנים ב-Next.js

ייתכן שתרצה להשתמש בגופנים מותאמים אישית כדי להפוך את יישום Next.js שלך למושך יותר מבחינה ויזואלית. שימוש בגופנים מותאמים אישית יכול לשפר משמעותית את המראה והתחושה של האתר שלך, אבל זה יכול גם להאט את ביצועי האתר שלך אם לא מבצעים אופטימיזציה כראוי. ה @הבא/גופן החבילה היא פתרון לבעיה זו.

החבילה @next/font מספקת דרך פשוטה ויעילה לייעל את טעינת הגופנים ב-Next.js, תוך שיפור זמן טעינת הדפים והביצועים הכוללים. מאמר זה מספק מידע כיצד להשתמש ב-@next/font בפרויקט Next.js שלך.

התקנת החבילה

אתה יכול להתקין את @הבא/גופן חבילה על ידי הפעלת הפקודה הבאה בטרמינל שלך:

npm התקן את @next/font

אם אתה משתמש בחוט, אתה יכול להתקין את החבילה על ידי הפעלת הפקודה הזו:

yarn הוסף @next/font

שימוש ב-@next/font כדי לבצע אופטימיזציה של גופני Google

ה @הבא/גופן החבילה מייעלת את השימוש בגופני Google. ה @הבא/גופן מארח באופן אוטומטי את הפונטים של Google בשרת Next.js כך שלא נשלחת בקשה לגוגל לקבל את הפונטים.

כדי להשתמש בפונט של גוגל באפליקציה שלך, תייבא את הגופן כפונקציה מ @next/font/google לתוך ה _app.js קובץ ב- דפים מַדרִיך:

יְבוּא { רובוטו } מ'@next/font/google'
const roboto = Roboto({ קבוצות משנה: ['לָטִינִית'] })
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהMyApp({ Component, pageProps }) {
לַחֲזוֹר (

 )
}

בבלוק הקוד למעלה, יצרת גופן משתנה באמצעות ה רובוטו פונקציית גופן. ה תת-קבוצה מאפיין משנה את הגופן לתווים הלטיניים בלבד; אם אתה משתמש בשפה אחרת, אתה יכול להגדיר משנה את הגופן לשפה זו.

ניתן גם לציין את משקל הגופן יחד עם סגנון הגופן בעת ​​הגדרת הגופן:

const רובוטו = רובוטו( 
 {
 קבוצות משנה: ['לָטִינִית'],
 מִשׁקָל: '400',
 סִגְנוֹן: 'נטה'
 }
)

אתה מציין מספר משקלי גופנים וסגנונות גופנים באמצעות מערכים.

לדוגמה:

const רובוטו = רובוטו( 
 {
 קבוצות משנה: ['לָטִינִית'],
 משקל: ['400', '500', '700'],
 סגנון: ['נטה', 'נוֹרמָלִי']
 }
)

לאחר מכן, תעטוף את הרכיבים שלך ב- רָאשִׁי תייגו והעבירו את הגופן ככיתה ל- רָאשִׁי תָג:

יְבוּא { רובוטו } מ'@next/font/google'
const רובוטו = רובוטו( 
 {
 קבוצות משנה: ['לָטִינִית'],
 משקל: ['400', '500', '600'],
 סגנון: ['נטה', 'נוֹרמָלִי']
 }
)
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהMyApp({ Component, pageProps }) {
לַחֲזוֹר (


 </main>
 )
}

עיבוד האפליקציה שלך עם בלוק הקוד שלמעלה יחיל את הגופן על כל האפליקציה שלך. לחלופין, תוכל להחיל את הגופן על עמוד בודד. לשם כך, אתה מוסיף את הגופן לעמוד מסוים.

ככה:

יְבוּא { רובוטו } מ'@next/font/google'
const רובוטו = רובוטו( 
 {
 קבוצות משנה: ['לָטִינִית'],
 משקל: ['400', '500', '600'],
 סגנון: ['נטה', 'נוֹרמָלִי']
 }
)
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהבית() {
לַחֲזוֹר (


שלום לך!!!</p>
 </div>
 )
}

שימוש ב-@next/font כדי לייעל גופנים מקומיים

ה @הבא/גופן החבילה גם מייעלת את השימוש בגופנים מקומיים. הטכניקה של אופטימיזציה של גופנים מקומיים באמצעות ה @הבא/גופן החבילה די דומה לאופטימיזציה של גופני גוגל, עם הבדלים עדינים.

כדי לייעל גופנים מקומיים, השתמש ב- localFont פונקציה שמסופקת על ידי @הבא/גופן חֲבִילָה. אתה מייבא את localFont לתפקד מ @next/font/local ולאחר מכן הגדר את הגופן המשתנה שלך לפני באמצעות הגופן ביישום Next.js שלך.

ככה:

יְבוּא localFont מ'@next/font/local'
const myFont = localFont({ src: './my-font.woff2' })
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהMyApp({ Component, pageProps }) {
לַחֲזוֹר (


 </main>
 )
}

אתה מגדיר את הגופן המשתנה myFont משתמש ב localFont פוּנקצִיָה. ה localFont הפונקציה לוקחת אובייקט כארגומנט שלה. לאובייקט יש תכונה אחת, src, המוגדר לנתיב הקובץ של קובץ הגופן ב- WOFF2 פוּרמָט "./my-font.woff2".

אתה יכול להשתמש במספר קובצי גופנים עבור משפחת גופנים אחת. כדי לעשות זאת, אתה מגדיר את src מאפיין למערך המכיל אובייקטים של הגופנים השונים והמאפיינים שלהם.

לדוגמה:

const myFont = localFont( 
 {
 src: [
 {
 נָתִיב: './Roboto-Regular.woff2',
 מִשׁקָל: '400',
 סִגְנוֹן: 'נוֹרמָלִי',
 },
 {
 נָתִיב: './Roboto-Italic.woff2',
 מִשׁקָל: '400',
 סִגְנוֹן: 'נטה',
 },
 {
 נָתִיב: './Roboto-Bold.woff2',
 מִשׁקָל: '700',
 סִגְנוֹן: 'נוֹרמָלִי',
 },
 {
 נָתִיב: './Roboto-BoldItalic.woff2',
 מִשׁקָל: '700',
 סִגְנוֹן: 'נטה',
 },
 ]
 }
)

שימוש ב-@next/font עם Tailwind CSS

כדי להשתמש ב @הבא/גופן חבילה עם Tailwind CSS, אתה צריך להשתמש במשתני CSS. לשם כך, תגדיר את הגופן שלך באמצעות גוגל או גופנים מקומיים ולאחר מכן תטען את הגופן שלך עם אפשרות המשתנה לציין את שם משתנה ה-CSS.

לדוגמה:

יְבוּא { אינטר } מ'@next/font/google'
const inter = Inter({
 קבוצות משנה: ['לָטִינִית'],
 מִשְׁתַנֶה: '--font-inter',
})
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהMyApp({ Component, pageProps }) {
לַחֲזוֹר (
`${inter.variable} font-sans`}>

 </main>
 )
}

בבלוק הקוד למעלה, יצרת את הגופן, בֵּין, והגדר את המשתנה ל --font-inter. ה className של האלמנט הראשי מוגדר למשתנה הגופן ו font-sans. ה inter.variable הכיתה תחיל את בֵּין גופן לדף, ואת font-sans class יחיל את הגופן sans-serif המוגדר כברירת מחדל.

לאחר מכן, אתה מוסיף את משתנה ה-CSS לקובץ התצורה של הרוח הגבית tailwind.config.cjs:

/** @סוּג {import('tailwindcss').Config}*/
מודול‎.exports = {
 תוכן: ["./index.html",
"./src/**/*.{js, ts, jsx, tsx}",],
 נושא: {
 להאריך: {
 משפחת גופן: {
 ללא: ['var(--font-inter)'],
 },
 },
 },
 תוספים: [],
}

כעת תוכל להחיל את הגופן ביישום שלך באמצעות ה font-sans מעמד.

אופטימיזציה של גופנים עם @next/font

החבילה @next/font היא דרך פשוטה ויעילה לייעל את טעינת הגופנים ב-Next.js. חבילה זו מבטיחה שהגופנים המותאמים אישית שלך נטענים ביעילות, ומשפרת את ביצועי האתר וחווית המשתמש שלך. מאמר זה מספק מידע כיצד להגדיר את החבילה @next/font ולהשתמש בה ביישום Next.js שלך. אתה יכול לשפר עוד יותר את ביצועי האתר שלך על ידי אופטימיזציה של תמונות.