تعد خطوط الويب طريقة رائعة لإضافة خطوط مخصصة إلى موقع الويب الخاص بك. قد لا تكون هذه الخطوط متاحة على نظام المستخدم ، لذلك تحتاج إلى تضمينها في مشروعك من خلال استضافتها أو الرجوع إليها عبر CDN.
تعرف على كيفية تضمين خطوط الويب في موقع ويب Next.js باستخدام هاتين الطريقتين.
استخدام الخطوط ذاتية الاستضافة في Next.js
لإضافة خطوط ذاتية الاستضافة في Next.js ، تحتاج إلى ذلك استخدم قاعدة @ font-face CSS. تتيح لك هذه القاعدة إضافة خطوط مخصصة إلى صفحة الويب.
قبل استخدام font-face ، يجب عليك تنزيل الخطوط التي تريد استخدامها. هناك العديد من مواقع على الإنترنت تقدم خطوطًا مجانية، بما في ذلك خطوط Google و fontspace و dafont.
بمجرد تنزيل خطوط الويب ، قم بتحويلها إلى تنسيقات خطوط مختلفة لدعم متصفحات متعددة. يمكنك استخدام أدوات تحويل الخطوط المجانية عبر الإنترنت لنفعل ذلك. تدعم متصفحات الويب الحديثة تنسيقات .woff و. woff2. إذا كنت بحاجة إلى دعم المتصفحات القديمة ، فيجب عليك أيضًا توفير تنسيقات .eot و. ttf.
قم بإنشاء مجلد جديد يسمى الخطوط في دليل موقعك واحفظ ملفات الخطوط المحولة هناك.
الخطوة التالية هي تضمين وجوه الخطوط في ملف
الأنماط / global.css ملف لجعلها متاحة على موقع الويب بأكمله. يوضح هذا المثال أوجه الخط لخط حورية البحر بالخط العريض:@ font-face {
خط العائلة: 'حورية البحر';
src: url ('ميرميد- بولد');
src: url ('حورية البحر- Bold.eot؟ #iefix') شكل('مضمن-opentype'),
عنوان url ('حورية البحر - بولد') شكل('woff2'),
عنوان url ('حورية البحر بولد') شكل('ووف'),
عنوان url ('حورية البحر بولد. ttf') شكل('كتابه صحيحه');
وزن الخط: عريض ؛
نمط الخط: عادي ؛
عرض الخط: مبادلة ؛
}
بمجرد تضمين ملفات الخطوط ، يمكنك استخدام تلك الخطوط في ملف CSS على مستوى المكون:
h1 {
عائلة الخطوط: حورية البحر ؛
}بما في ذلك خطوط الويب إلى Next.js عبر CDN
تقدم بعض مواقع الويب خطوط الويب عبر CDN التي يمكنك استيرادها إلى تطبيقك. يسهل إعداد هذا الأسلوب لأنك لست بحاجة إلى تنزيل الخطوط أو إنشاء أوجه الخطوط. بالإضافة إلى ذلك ، إذا كنت تستخدم خطوط Google أو TypeKit ، فإن Next.js يعالج التحسين تلقائيًا.
يمكنك إضافة خطوط من CDN باستخدام علامة الارتباط أو قاعدة الاستيراد @ داخل ملف CSS.
تنتقل علامة الارتباط دائمًا داخل علامة الرأس لمستند HTML. لإضافة علامة رأس في Next.js ، يجب عليك إنشاء مستند مخصص. يعدل هذا المستند علامة الرأس والجسم المستخدمة لعرض كل صفحة.
ابدأ في استخدام ميزة المستند المخصص هذه عن طريق إنشاء الملف /pages/_document.js.
بعد ذلك ، قم بتضمين ارتباط الخط في رأس ملف _document.js.
يستورد مستند ، {Html ، Head ، Main ، NextScript} من "التالي/وثيقة";
فصلملفاتييمتدوثيقة{
ثابتةغير متزامن getInitialProps (ctx) {
مقدار ثابت العناصر الأولية = انتظر Document.getInitialProps (ctx) ،
يعود {... initialProps} ؛
}
يجعل() {
يعود (
<لغة البرمجة>
<رأس>
<وصلة
href ="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&عرض = مبادلة"
rel ="ورقة الأنماط"
/>
</Head>
<جسم>
<رئيسي />
<NextScript />
</body>
</Html>
);
}
}
يصدّرتقصير ملفاتي؛كيفية استخدام قاعدةimport لتضمين الخطوط في مشروع Next.js
هناك خيار آخر وهو استخدام قاعدةimport في ملف CSS الذي تريد استخدام الخط فيه.
على سبيل المثال ، اجعل الخط متاحًا عبر المشروع بأكمله عن طريق استيراد خط الويب بتنسيق الأنماط / global.css ملف.
import url ('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&عرض = مبادلة');
يمكنك الآن الرجوع إلى عائلة الخطوط بتنسيق محدد CSS مثله:
h1 {
خط العائلة:'شاشة ليبر كاسلون'، الرقيق.
}تسمح لك قاعدةimport باستيراد خط في ملف CSS مضمن. يؤدي استخدام علامة الارتباط إلى تسهيل الوصول إلى الخط عبر الموقع بالكامل.
هل يجب عليك استضافة الخطوط محليًا أم استيرادها عبر شبكة توصيل المحتوى؟
عادةً ما تكون الخطوط المستضافة محليًا أسرع من الخطوط المستوردة من CDN. وذلك لأن المستعرض لا يتعين عليه تقديم طلب إضافي إلى الخط CDN بمجرد تحميل صفحة الويب.
إذا كنت تريد استخدام الخطوط المستوردة ، فقم بتحميلها مسبقًا لتحسين أداء الموقع. إذا كانت الخطوط متاحة على خطوط Google أو Typekit ، فيمكنك استيرادها والاستفادة من ميزات تحسين Next.js.