هل تؤدي الخطوط إلى إبطاء أداء موقعك؟ قم بتحسين وقت تحميل الخط لتطبيقك باستخدام هذه الحزمة.
قد ترغب في استخدام الخطوط المخصصة لجعل تطبيق Next.js أكثر جاذبية من الناحية المرئية. يمكن أن يؤدي استخدام الخطوط المخصصة إلى تحسين شكل ومظهر موقع الويب الخاص بك بشكل كبير ، ولكنه قد يؤدي أيضًا إلى إبطاء أداء موقعك إذا لم يتم تحسينه بشكل صحيح. ال @ التالي / الخط الحزمة هي حل لهذه المشكلة.
توفر حزمة @ next / font طريقة بسيطة وفعالة لتحسين تحميل الخط في Next.js ، وتحسين وقت تحميل الصفحة والأداء العام. توفر هذه المقالة معلومات حول كيفية استخدام @ next / font في مشروع Next.js الخاص بك.
تثبيت الحزمة
يمكنك تثبيت @ التالي / الخط package عن طريق تشغيل الأمر التالي في جهازك الطرفي:
npm install @ next / font
إذا كنت تستخدم الغزل ، فيمكنك تثبيت الحزمة عن طريق تشغيل هذا الأمر:
إضافة الغزل @ next / font
استخدام @ next / font لتحسين خطوط Google
ال @ التالي / الخط تعمل الحزمة على تحسين استخدام خطوط Google. ال @ التالي / الخط يستضيف تلقائيًا خطوط Google على خادم Next.js بحيث لا يتم إرسال أي طلب إلى Google للحصول على الخطوط.
لاستخدام خط Google في تطبيقك ، ستقوم باستيراد الخط كدالة من @ next / font / google داخل ال _app.js ملف في الصفحات الدليل:
يستورد {روبوتو} من"@ next / font / google"مقدار ثابت roboto = Roboto ({ مجموعات فرعية: ["لاتيني"] })
يصدّرتقصيروظيفةتطبيقي({مكون ، pageProps}) {
يعود (
)
}
في مقطع التعليمات البرمجية أعلاه ، قمت بإنشاء خط متغير باستخدام امتداد روبوتو وظيفة الخط. ال مجموعة فرعية تقوم الخاصية بتقسيم الخط إلى الأحرف اللاتينية وحدها ؛ إذا كنت تستخدم لغة أخرى ، فيمكنك تعيين الخط إلى تلك اللغة.
يمكنك أيضًا تحديد سمك الخط مع نمط الخط عند تحديد الخط:
مقدار ثابت roboto = Roboto (
{
مجموعات فرعية: ["لاتيني"],
وزن: '400',
أسلوب: "مائل"
}
)
يمكنك تحديد العديد من أوزان الخطوط وأنماط الخطوط باستخدام المصفوفات.
على سبيل المثال:
مقدار ثابت roboto = Roboto (
{
مجموعات فرعية: ["لاتيني"],
وزن: ['400', '500', '700'],
أسلوب: ["مائل", 'طبيعي']
}
)
بعد ذلك ، ستلف المكونات الخاصة بك في ملف رئيسي علامة وتمرير الخط كفئة إلى رئيسي بطاقة شعار:
يستورد {روبوتو} من"@ next / font / google"مقدار ثابت roboto = Roboto (
{
مجموعات فرعية: ["لاتيني"],
وزن: ['400', '500', '600'],
أسلوب: ["مائل", 'طبيعي']
}
)
يصدّرتقصيروظيفةتطبيقي({مكون ، pageProps}) {
يعود (
</main>
)
}
سيؤدي تقديم التطبيق الخاص بك مع كتلة التعليمات البرمجية أعلاه إلى تطبيق الخط على التطبيق بأكمله. بدلاً من ذلك ، يمكنك تطبيق الخط على صفحة واحدة. للقيام بذلك ، يمكنك إضافة الخط إلى صفحة معينة.
مثل ذلك:
يستورد {روبوتو} من"@ next / font / google"مقدار ثابت roboto = Roboto (
{
مجموعات فرعية: ["لاتيني"],
وزن: ['400', '500', '600'],
أسلوب: ["مائل", 'طبيعي']
}
)
يصدّرتقصيروظيفةبيت() {
يعود (مرحبا هناك !!!/p>
</div>
)
}
استخدام @ next / font لتحسين الخطوط المحلية
ال @ التالي / الخط تعمل الحزمة أيضًا على تحسين استخدام الخطوط المحلية. تقنية تحسين الخطوط المحلية من خلال ملف @ التالي / الخط الحزمة تشبه إلى حد كبير تحسين خطوط Google ، مع وجود اختلافات طفيفة.
لتحسين الخطوط المحلية ، استخدم ملف localFont الوظيفة التي يوفرها @ التالي / الخط طَرد. تقوم باستيراد ملف localFont وظيفة من @ التالي / الخط / المحلي ثم حدد الخط المتغير الخاص بك من قبل باستخدام الخط في تطبيق Next.js الخاص بك.
مثل ذلك:
يستورد localFont من"@ التالي / الخط / المحلي"مقدار ثابت myFont = localFont ({ src: "./my-font.woff2" })
يصدّرتقصيروظيفةتطبيقي({مكون ، 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 مع Tailwind CSS
لاستخدام ال @ التالي / الخط الحزمة مع Tailwind CSS ، تحتاج إلى استخدام متغيرات CSS. للقيام بذلك ، ستحدد خطك باستخدام Google أو الخطوط المحلية ثم تقوم بتحميل الخط الخاص بك بخيار المتغير لتحديد اسم متغير CSS.
على سبيل المثال:
يستورد {إنتر} من"@ next / font / google"مقدار ثابت بين = انتر ({
مجموعات فرعية: ["لاتيني"],
عامل: "--Font-inter",
})
يصدّرتقصيروظيفةتطبيقي({مكون ، pageProps}) {
يعود (`$ {متغير مشترك} font-sans`}>
</main>
)
}
في مقطع التعليمات البرمجية أعلاه ، أنشأت الخط ، بين ، وقم بتعيين المتغير على - خط انتر. ال اسم الطبقة من العنصر الرئيسي إلى متغير الخط و الخط بلا. ال بين المتغيرات سيتم تطبيق فئة بين إلى الصفحة ، و الخط بلا ستطبق الفئة الخط الافتراضي sans-serif.
بعد ذلك ، يمكنك إضافة متغير CSS إلى ملف تكوين Tailwind Tailwind.config.cjs:
/** @يكتب {import ('tailwindcss'). Config}*/
وحدة.exports = {
محتوى: ["./index.html",
"./src/**/*.{js، ts، jsx، tsx}",],
سمة: {
يمتد: {
خط العائلة: {
بلا: ["var (- font-inter)"],
},
},
},
المكونات الإضافية: [] ،
}
يمكنك الآن تطبيق الخط في تطبيقك باستخدام امتداد الخط بلا فصل.
تحسين الخط باستخدام @ next / font
تعد حزمة @ next / font طريقة بسيطة وفعالة لتحسين تحميل الخط في Next.js. تضمن هذه الحزمة تحميل الخطوط المخصصة بكفاءة ، مما يحسن أداء موقع الويب الخاص بك وتجربة المستخدم. توفر هذه المقالة معلومات حول كيفية إعداد حزمة @ next / font واستخدامها في تطبيق Next.js. يمكنك زيادة تحسين أداء موقعك عن طريق تحسين الصور.
