هذا الدرس من الدورة التدريبية: دورة تدريبية لغة CSS لإنشاء تصاميم وتنسيق صفحات الإنترنت
الدرس: عائلة الخطوط وطرق تضمين خطوط جوجل في HTML
المدة: 5 دقائق
وصف مختصر:
وصف الدرس
عائلة الخطوط وطرق تضمين خطوط جوجل في HTML
تعتبر عائلة الخطوط من العناصر الأساسية في تصميم صفحات الويب، حيث تلعب دورًا كبيرًا في تحسين تجربة المستخدم وإضفاء لمسة جمالية على المحتوى. في هذا الدرس من دبلومة تطوير الويب، سنتناول مفهوم عائلة الخطوط وكيفية تضمين خطوط جوجل في صفحات HTML.
ما هي عائلة الخطوط ونوع الخط؟
عائلة الخطوط تشير إلى مجموعة من الأنماط المختلفة لنوع معين من الخط. تشمل عائلات الخطوط الشائعة مثل Serif، Sans-serif، Monospace، وغيرها. كل نوع من الخطوط له خصائصه الخاصة ويستخدم في سياقات معينة لتحسين جمالية المحتوى.
كيفية تعيين عائلة الخط من خطوط المتصفح
يمكنك تعيين عائلة الخط في CSS باستخدام خاصية font-family. على سبيل المثال:
body {
font-family: Arial, sans-serif;
}
هنا، سيتم استخدام خط Arial، وإذا لم يكن متوفرًا، سيتم استخدام الخط البديل sans-serif.
كيفية تضمين عائلة الخطوط في صفحات HTML باستخدام خطوط جوجل
تُعتبر خطوط جوجل واحدة من أشهر المكتبات التي تقدم مجموعة واسعة من الخطوط المجانية. لتضمين خط من خطوط جوجل، يمكنك اتباع الخطوات التالية:
- انتقل إلى موقع Google Fonts.
- اختر الخط الذي ترغب في استخدامه.
- انسخ رابط التضمين (Embed link) الموجود في قسم Use on the web.
على سبيل المثال:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
ثم، قم بلصق هذا الرابط داخل قسم <head> في مستند HTML الخاص بك.
كيفية تطبيق أي خط تم تحميله من جوجل على عناصر الصفحة
بعد تضمين الخط، يمكنك تطبيقه على أي عنصر في الصفحة باستخدام خاصية font-family. على سبيل المثال:
h1 {
font-family: 'Roboto', sans-serif;
}
بهذه الطريقة، سيتم استخدام خط Roboto للعناوين من نوع h1، مما يجعل تصميم الصفحة أكثر جاذبية.
فوائد هذا الدرس:
- تعلم كيفية استخدام عائلة الخطوط وأنواعها لتحسين تصميم صفحات الويب.
- تضمين خطوط جوجل بسهولة في صفحات HTML الخاصة بك.
- تطبيق الخطوط المختلفة على العناصر لتخصيص المظهر.
- احصل على شهادة معتمدة بعد إكمال الدورة، مما يعزز فرصك في سوق العمل كمطور ويب.
انضم الآن واحصل على شهادتك!
ابدأ الآن في تعلم كيفية استخدام عائلة الخطوط وتضمين خطوط جوجل في صفحات HTML الخاصة بك. انضم إلى دورتنا لتطوير الويب واحصل على شهادة معتمدة تساعدك في بناء مواقع ويب احترافية.
الفيديوهات
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و الفيديوهات
فيديو الدرس التعليمي عائلة الخطوط وطرق تضمين خطوط جوجل في HTML
المصادر
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و المصادر
محتوى صفحة إنترنت لتعلم تنسيق الألوان والخطوط وخصائص النصوص
أوامر تنسيق الألوان والخطوط وخصائص النصوص
ملحقات ال PDF
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و ملحقات ال PDF
شرح مرجعي للألوان والخطوط في تنسيق صفحات ومواقع الإنترنت
- 225 دقيقة من الفيديوهات التفاعلية الحصرية
- 71 مصدر إضافي
- 41 ملحقات PDFs
- 3 تطبيق نظري وعملي
- الوصول على جميع الأجهزة
- وصول مدى الحياة
- شهادة أوروبية لإتمام الدراسة
- ا لحصول على شهادة دبلوم موثقة
للوصول إلى الفيديوهات والمصادر والملحقات الدراسية والمواد التعليمية لدراسة برنامج
كورس تعلم لغة CSS لإنشاء تصاميم وتنسيق مواقع الإنترنت
اضغط هنا ابدأ التعلم
أيضاً عند أداء الاختبارات بنجاح سوف تحصل على الشهادة الأوروبية المعتمدة في إتمام الدراسة والتأهل لطلب الشهادة الدولية في هذا البرنامج
الدروس والاختبارات لتعلم هذه الدورة التدريبية : دورة تدريبية لغة CSS لإنشاء تصاميم وتنسيق صفحات الإنترنت
دورات تدريبية أخرى في برمجة
دورة لغة برمجة PHP لبناء صفحات ويب ديناميكية
دورة لغة برمجة PHP لبناء صفحات ويب ديناميكية يقام البرنامج بالتعاون وباعتماد الجهات التالية شهادة موثقة من الجهات الالمانية شهادة معتمدة الوحدة...
تعلم بناء بزنس رقمي باستخدام أدوات الذكاء الاصطناعي
تعلم بناء بزنس رقمي متكامل بسهولة باستخدام أدوات الذكاء الاصطناعي. اكتسب مهارات تصميم الهوية، إنشاء المواقع والمتاجر الإلكترونية، التسويق الرقمي، وتحليل البيانات.
كورس تعلم HTML من الصفر لبناء صفحات ويب
تعلم أساسيات بناء صفحات ومواقع الإنترنت وكل شيء عن المتصفحات وملفات برمجة المواقع HTML
مقالات ذات صلة
تعلم البرمجة وتطوير صفحات الويب Javascript
برنامج تعلم البرمجة وتطوير صفحات الويب بلغة JavaScript يعد برنامج “تعلم البرمجة وتطوير صفحات الويب بلغة JavaScript” خيارًا مثاليًا لكل من يرغب...
الركيزة الأساسية للإنترنت: لماذا لا يمكنك الاستغناء عن عناوين IP ونظام DNS
مقدمة عندما نتصفح الإنترنت ونزور مواقعنا المفضلة، قد لا ندرك العملية المعقدة التي تحدث خلف الكواليس لربطنا بالصفحة التي نريدها. تلعب عناوين...
لغة JSON: أساس تبادل البيانات في تطبيقات الويب الحديثة
مقدمة في عالم تطوير الويب الحديث، أصبحت لغة JSON (JavaScript Object Notation) حجر الزاوية في تبادل البيانات بين مختلف الأجزاء من تطبيق...
