الانتقال إلى المحتوى الرئيسي

كيفية إضافة خط روبوتو إلى موقع الويب الخاص بك: دليل مفصل

الخط هو أحد العناصر المهمة لتصميم الويب ، والذي يمكن أن يؤثر بشكل كبير على الإدراك البصري لموقعك. واحدة من الخطوط تطوير الشبكة الأكثر شعبية هو روبوتو. صممه جوجل ، فقد قراءة ممتازة ونظرة حديثة ، مما يجعلها خيارا مثاليا للعديد من المواقع.

إذا كنت تريد استخدام خط روبوتو على موقع الويب الخاص بك ، فستحتاج إلى إضافته إلى أعلى رمز صفحة الويب الخاصة بك. هناك عدة طرق للقيام بذلك ، ولكن الطريقة الأسهل والأكثر موثوقية هي استخدام اتصال الخط عبر خطوط جوجل.

للبدء ، قم بتوصيل روبوتو بموقعك عن طريق إدخال السطر التالي من التعليمات البرمجية في علامة صفحة الويب الخاصة بك:

باستخدام هذا الرمز ، يمكنك توصيل ورقة أنماط تحتوي على جميع الحروف الرسومية وأنماط روبوتو بصفحة الويب الخاصة بك. بعد ذلك ، يمكنك استخدام خط روبوتو في قواعد كس أو الأنماط المضمنة على موقعك.

في ما يلي مثال لقاعدة كس البسيطة التي تطبق خط روبوتو على الفقرات الموجودة على موقعك:

الآن تستخدم فقراتك خط روبوتو. يمكنك استكمال قاعدة كس هذه بخصائص أخرى مثل حجم الخط واللون وما إلى ذلك. لإنشاء التأثير المرئي المطلوب.

  1. الخطوة 1: قم بتنزيل خط روبوتو
  2. تثبيت خط روبوتو باستخدام كندي
  3. تحميل الخط روبوتو من الموقع الرسمي

الخطوة 1: قم بتنزيل خط روبوتو

التثبيت على الخادم الخاص بك:

1. تحميل ملفات الخط روبوتو من الموقع الرسمي للمطورين. عادة ما يتم تقديم ملفات الخطوط بتنسيقات.صندوق النقد الدولي, .ووف و .2.

2. قم بإنشاء مجلد منفصل على الخادم الخاص بك لتخزين ملفات الخطوط.

3. ضع ملفات الخطوط التي تم تنزيلها في المجلد الذي تم إنشاؤه على الخادم.

باستخدام خطوط جوجل:

1. فتح جوجل الخطوط في المتصفح والعثور على الخط روبوتو.

2. انقر فوق الزر" تحديد الأنماط " وحدد خيارات الخط المطلوبة.

3. انسخ رمز الارتباط إلى الخط الذي توفره خطوط جوجل.

4. الصق الرمز المرجعي للخط المنسوخ في قسم مستند هتمل.

الآن تم تحميل الخط روبوتو وجاهزة للاستخدام على موقع الويب الخاص بك. في الخطوة التالية ، سننظر في كيفية تطبيقه على عناصر النص.

تثبيت خط روبوتو باستخدام كندي

  1. إدراج التعليمات البرمجية التالية في ملف النمط الخاص بك (كس):
@استيراد رابط ('https://fonts.googleapis.com/css2 ?family=Roboto:wght@400; 700 & عرض = مبادلة');
  1. في ملف النمط الخاص بك ، قم بتطبيق خط روبوتو على العناصر المطلوبة:
الجسم {

الخط الأسرة: 'روبوتو' ، بلا الرقيق;

}

الآن سيتم استخدام خط روبوتو على موقعك.

تحميل الخط روبوتو من الموقع الرسمي

الخطوة 1. افتح متصفح ويب وانتقل إلى الموقع الرسمي لخط روبوتو.

الخطوة 2. ابحث عن قسم" تنزيل روبوتو " وانقر على الرابط لتنزيل الخط.

الخطوة 3. حدد خيار تنزيل الخط المطلوب. عادة ، يتم تقديم خط روبوتو في نمطين-منتظم وجريء ، وكذلك مع خيارات مختلفة لأنظمة التشغيل المختلفة.

الخطوة 4. احفظ ملف خط روبوتو على جهاز الكمبيوتر الخاص بك عن طريق تحديد المجلد أو الموقع المناسب.

  1. الخطوة 5. قم بفك ضغط الملف الذي تم تنزيله إذا تم ضغطه في أرشيف. تأكد من أن لديك ملفات خطوط مع ملحقات.صندوق النقد الدولي أو .أوتف لكل نمط المحدد.

نمط الخط: عادي;

  1. }

نمط الخط: عادي;

}

الخطوة 7. استبدال "مسار الملف" في رمز كس مع المسار إلى ملفات الخط روبوتو التي قمت بحفظها على جهاز الكمبيوتر الخاص بك.

مثال على النص

الخط الأسرة: 'روبوتو' ، بلا الرقيق;

}