هذا الدرس من الدورة التدريبية: دورة تدريبية لغة CSS لإنشاء تصاميم وتنسيق صفحات الإنترنت
الدرس: عائلة الخطوط وكيفية استيرادها في CSS باستخدام CDN
المدة: 5 دقائق
وصف مختصر:
وصف الدرس
عائلة الخطوط وكيفية استيرادها في CSS باستخدام CDN
تعتبر عائلة الخطوط من العناصر الأساسية في تصميم صفحات الويب، حيث تلعب دورًا مهمًا في تحسين جمالية النصوص وتجربة المستخدم. في هذا الدرس من دبلومة تطوير الويب، سنتناول كيفية استيراد عائلة الخطوط في ملف CSS الخاص بك باستخدام خطوط جوجل، بالإضافة إلى مناقشة أفضل الممارسات في هذا المجال.
ما هي عائلة الخطوط؟
عائلة الخطوط تشير إلى مجموعة من الأنماط المختلفة لنوع معين من الخط. تتضمن عائلات الخطوط الشائعة مثل Serif، Sans-serif، وMonospace. كل نوع من الخطوط له خصائصه الخاصة ويمكن استخدامه في سياقات معينة لإضفاء لمسة جمالية على المحتوى.
كيفية استيراد عائلة الخطوط في CSS باستخدام Google Fonts
يمكنك استيراد عائلة الخطوط في ملف CSS الخاص بك باستخدام Google Fonts بسهولة. إليك الخطوات التي يجب اتباعها:
- انتقل إلى موقع 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 الخاص بك.
استيراد الخطوط من CDN أو رابط خارجي
على الرغم من أن استيراد الخطوط من روابط CDN قد يبدو سهلًا، إلا أنه ليس من أفضل الممارسات. ذلك لأن:
- يمكن أن يؤدي الاعتماد على روابط خارجية إلى مشاكل في تحميل الصفحة إذا كانت الخدمة معطلة.
- قد تؤثر على سرعة التحميل العامة لموقعك إذا كانت الخطوط تستغرق وقتًا طويلاً للتحميل.
- التحديثات أو التغييرات في روابط CDN قد تؤدي إلى تعطل الخطوط على موقعك.
بدلاً من ذلك، يُفضل تحميل الخطوط محليًا أو استخدام طرق أفضل مثل @import في CSS.
مثال على كيفية استيراد خط باستخدام @import
إليك كيفية استخدام خاصية @import
لاستيراد خط في ملف CSS:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
بعد استيراد الخط، يمكنك تطبيقه على العناصر في صفحة HTML الخاصة بك باستخدام خاصية font-family
:
body {
font-family: 'Roboto', sans-serif;
}
فوائد هذا الدرس:
- تعلم كيفية استيراد عائلة الخطوط في ملف CSS الخاص بك باستخدام Google Fonts.
- فهم لماذا يعتبر استيراد الخطوط من روابط CDN ليس من أفضل الممارسات.
- احصل على شهادة معتمدة بعد إكمال الدورة، مما يعزز فرصك في سوق العمل كمطور ويب.
انضم الآن واحصل على شهادتك!
ابدأ الآن في تعلم كيفية استيراد عائلة الخطوط في CSS. انضم إلى دورتنا لتطوير الويب واحصل على شهادة معتمدة تساعدك في بناء مواقع ويب احترافية.
الفيديوهات
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و الفيديوهات
فيديو الدرس التعليمي عائلة الخطوط وكيفية استيرادها في CSS باستخدام CDN
المصادر
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و المصادر
محتوى صفحة إنترنت لتعلم تنسيق الألوان والخطوط وخصائص النصوص
أوامر تنسيق الألوان والخطوط وخصائص النصوص
ملحقات ال PDF
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و ملحقات ال PDF
شرح مرجعي للألوان والخطوط في تنسيق صفحات ومواقع الإنترنت
الدروس والاختبارات لتعلم هذه الدورة التدريبية : دورة تدريبية لغة CSS لإنشاء تصاميم وتنسيق صفحات الإنترنت