تنزيل next google fonts - تنزيل رمز مصدر next google fonts

next google fonts

كود الذكاء الاصطناعي

v2.2.0

تنزيل

️

تم إهمال هذا المشروع

اعتبارًا من Next.js 10.2 ، تم تحسين خطوط Google تلقائيًا؟

شكرا على كل حبك ودعمك لهذا المشروع ،
جو

المدى التالي من طراز Google

مساعد صغير next/head لتحميل خطوط Google بسرعة ومتزامنة ⏩

باستخدام next.js 10؟ انظر "كيف يمكن مقارنة هذا إلى تحسين الخط التالي. js؟" قبل المتابعة.

جدول المحتويات

يثبت
الأسئلة الشائعة

يثبت

في هذا المثال ، سنضيف Inter (على وجه التحديد الأوزان 400 و 700 ) إلى تطبيق Next.js.

انظر joebell.co.uk للحصول على مثال عمل.

أضف الحزمة إلى مشروع Next.js الخاص بك:
```
npm i next-google-fonts
```

إنشاء مكون Head مخصص.

من المهم الاعتراف بأن next-google-fonts هي مكون صغير next/head صغير ويجب عدم التداخل داخل next/head . لحل هذا ، لف كلا المكونين Fragment .

 // components/head.js
import * as React from "react" ;
import NextHead from "next/head" ;
import { GoogleFonts } from "next-google-fonts" ;

export const Head = ( { children , title } ) => (
  < React . Fragment >
    < GoogleFonts href = "https://fonts.googleapis.com/css2?family=Inter:wght@400;700 & display = swap " />
    < NextHead >
      < meta charSet = "UTF-8" />
      < meta
        name = "viewport"
        content = "width=device-width, initial-scale=1.0"
      />
      < meta httpEquiv = "x-ua-compatible" content = "ie=edge" />

      < title > { title } </ title >

      { children }
    </ NextHead >
  </ React . Fragment >
) ;

أضف خط Google/S المطلوب إلى أنماطك مع احتياطي معقول. لا يهم حقًا ما إذا كنت تستخدم CSS أو SASS أو CSS-in-JS:
```
 body {
  font-family : "Inter" , sans-serif;
}
```
قم بتشغيل تطبيق Next.js لمعرفة النتائج في العمل!
يجب أن تتوقع أن ترى خط الاحتياطي أولاً ، يليه التبديل إلى Google FONT/S دون أي تحذيرات CSS لحجب. سيستمر خطك/S في العرض حتى يتم إعادة توجيه تطبيقك.
إذا تم تعطيل JS ، فسيتم عرض خط الاحتياطي فقط.

الأسئلة الشائعة

كيف يمكن مقارنة هذا إلى تحسين الخط التالي. js؟
لماذا؟

كيف يمكن مقارنة هذا إلى تحسين الخط التالي. js؟

قدمت Next.js 10 تحسين خطوط Google التلقائية ، يمكنك اتخاذ قرار بشأن الحل الذي يجب استخدامه بناءً على المعايير التالية:

"خطاتي ليست أولوية ويمكن تحميلها بشكل غير متزامن "-استخدم next-google-fonts .
"خطاتي هي الأولوية ويجب عدم تحميلها بشكل غير متزامن " - استخدم Next.js Font Optimization.

لمزيد من القراءة ، راجع مناقشة قضية Next.js.

لماذا؟

تهدف next-google-fonts إلى جعل عملية استخدام خطوط Google في Next.js أكثر اتساقًا وأسرع وغير مؤلم: إنها مسبقة من أصول الخطوط والألوان المسبقة وتحميل ملف CSS بشكل غير متزامن.

في التكرار الحالي لـ next/head ، لا يمكننا الاستفادة من طريقة "Hack" المألوفة لتحميل خطوط Google غير المتزامنة:

 <!-- Plain HTML -->
< link
  rel =" stylesheet "
  href =" https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap "
  media =" print "
  onload =" this.media='all' "
/>