يعد خط روبوتو أحد أكثر الخطوط شيوعا وتنوعا في تصميم الويب. مصممة خصيصا للاستخدام على الشاشات ، روبوتو لديها خطوط نظيفة ونقية ، مما يجعلها خيارا مثاليا لمجموعة متنوعة من المهام ، من العناوين إلى محتوى النص.
يعد توصيل خط روبوتو بصفحة ويب أمرا بسيطا للغاية ولا يتطلب سوى بضع خطوات. أولا ، تحتاج إلى تنزيل ملفات الخطوط من الخادم ووضعها في دليل معين لمشروعك. بعد ذلك ، يمكنك توصيل الخط باستخدام أنماط كس.
الخطوة 1: تحميل ملفات الخط روبوتو من موقع جوجل الخطوط الرسمية. يرجى ملاحظة أنك قد تحتاج إلى اتصال بالإنترنت لتنزيل الملفات.
بعد ذلك ، بعد تنزيل ملفات الخطوط ، يمكنك وضعها في مجلد منفصل في مشروعك. يمكن أن يكون اسم المجلد أي شيء ، ولكن يوصى باستخدام شيء مفهوم ، مثل "الخطوط".
بعد وضع ملفات الخط في مجلد المشروع ، يمكنك توصيل الخط باستخدام كس. للقيام بذلك ، قم بإنشاء نمط عن طريق تحديد المسار إلى ملف الخط واسمه في خاصية كس "عائلة الخط". على سبيل المثال:
الآن بعد أن قمت بتوصيل خط روبوتو بصفحة الويب الخاصة بك ، يمكنك استخدامه في قواعد كس لتعيينه لعناصر معينة مثل العناوين والفقرات وما إلى ذلك. على سبيل المثال:
الخطوة 3: أضف الكود التالي إلى ملف كس لتطبيق الخط على عناصر معينة:
ح1 {
الخط الأسرة: 'روبوتو' ، بلا الرقيق;
}
سيتم الآن عرض خط روبوتو على صفحة الويب الخاصة بك.
- توصيل خط روبوتو: دليل كامل
- كيفية تنزيل خط روبوتو من الموقع الرسمي
- كيفية إضافة خط روبوتو إلى موقع ويب
توصيل خط روبوتو: دليل كامل
تم إنشاء الخط روبوتو من قبل جوجل ويستخدم على نطاق واسع من قبل مطوري الويب. إنها مجموعة خطوط حديثة مثالية للاستخدام في مشاريع الويب. في هذا الدليل ، سننظر في كيفية توصيل خط روبوتو بشكل صحيح بموقعك.
1. تحميل الخط روبوتو من موقع جوجل الخطوط الرسمية. يمكنك تنزيل العديد من خيارات الخطوط مثل العادية والجريئة والمائلة وغيرها.
2. قم بتوصيل الخط بمستند هتمل باستخدام العلامة الموجودة في القسم. حدد المسار إلى ملف الخط في السمة هريف:
3. استخدم خاصية عائلة الخط في كس لتطبيق خط روبوتو على العناصر المحددة:
الجسم {الآن سيتم تطبيق خط روبوتو على النص داخل العنصر. يمكنك أيضا تطبيق الخط على عناصر أخرى عن طريق تحديد محددات كس بدلا من ذلك
4. تحقق من عرض الخط بشكل صحيح على موقعك. افتح صفحة الويب الخاصة بك في متصفح وتأكد من عرض النص في خط روبوتو.
- الآن أنت تعرف كيفية توصيل خط روبوتو بشكل صحيح بمشروع الويب الخاص بك. ضع في اعتبارك أهمية استخدام الخطوط الصحيحة لإنشاء محتوى جذاب وقابل للقراءة على موقعك.
- كيفية تنزيل خط روبوتو من الموقع الرسمي
- افتح متصفحا وانتقل إلى الموقع الرسمي لخطوط جوجل.
- على موقع الويب ، ابحث عن شريط البحث واكتب "روبوتو".
- انقر فوق الزر" تحديد خيارات " بجوار خط روبوتو.
- حدد أنماط الخطوط المطلوبة. على سبيل المثال ، عادي ، مائل ، غامق ، إلخ. سيتم عرض الخطوط المحددة في الجزء السفلي من الشاشة.
- عند الانتهاء من التحديد ، انقر فوق الزر" تنزيل".
في النافذة التي تظهر ، حدد الموقع الذي تريد حفظ ملفات الخطوط فيه على جهاز الكمبيوتر الخاص بك.
انقر فوق الزر" حفظ".
بعد تحميل ملفات الخط ، يمكنك استخدام الخط روبوتو في مشروع الويب الخاص بك عن طريق توصيلها إلى ملفات كس.
كيفية إضافة خط روبوتو إلى موقع ويب
1. احصل على رابط إلى خط روبوتو
2. الصق رابط الخط في كود هتمل الخاص بك
افتح رمز هتمل لموقع الويب الخاص بك والصق الرابط المنسوخ إلى خط روبوتو في القسم
افتح رمز كس الخاص بك واستخدم الخاصية
الخط الأسرة
لتحديد الخط روبوتو للعناصر المطلوبة من موقع الويب الخاص بك. على سبيل المثال:
الجسم {
الخط الأسرة: 'روبوتو' ، بلا الرقيق;
}
4. استخدم خط روبوتو على موقع الويب الخاص بك
الآن ، بعد إضافة رابط إلى الخط وتثبيته في رمز كس الخاص بك ، يمكنك استخدام الخط روبوتو لعناصر مختلفة من موقع الويب الخاص بك. على سبيل المثال:
مرحبا ، العالم!
هذا نص مكتوب باستخدام خط روبوتو.