هذا الدرس من الدورة التدريبية: دورة تدريبية لغة CSS لإنشاء تصاميم وتنسيق صفحات الإنترنت
الدرس: استخدام الخطوط من ملفات محلية في المواقع وحل المشكلات عبر البحث
المدة: 5 دقائق
وصف مختصر:
وصف الدرس
استخدام الخطوط من ملفات محلية في المواقع وحل المشكلات عبر البحث
تعتبر الخطوط جزءًا أساسيًا من تصميم واجهات المستخدم، حيث تسهم في تحسين تجربة المستخدم وجمالية الموقع. في هذا الدرس من دبلومة تطوير الويب، سنستعرض كيفية استخدام الخطوط من ملفات محلية في تصميم المواقع، بالإضافة إلى كيفية حل المشكلات من خلال مهارات البحث.
كيفية تطبيق الخطوط المحملة على عناصر الصفحة
تستطيع استخدام أي خط قمت بتحميله مسبقًا وتطبيقه على عناصر الصفحة الخاصة بك. إليك خطوات بسيطة لفعل ذلك:
- قم بتحميل ملف الخط (مثل .ttf أو .woff) واحفظه في مجلد مناسب في مشروعك.
- استورد الخط في ملف CSS الخاص بك باستخدام قاعدة
@font-face
.
مثال:
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont.woff2') format('woff2'),
url('fonts/MyCustomFont.ttf') format('truetype');
}
تطبيق الخطوط على العناصر
بعد استيراد الخط، يمكنك استخدامه على أي عنصر في صفحتك كما يلي:
body {
font-family: 'MyCustomFont', sans-serif;
}
تعريف عائلة الخط لاستخدامها في العناصر
يمكنك تحديد عائلة الخط باستخدام font-family
، وهو ما يسمح لك بتطبيق الخطوط بشكل صحيح على العناصر. تأكد من تحديد الاسم الصحيح للخط الذي قمت بتحميله.
استخدام عائلة الخطوط المخصصة على أي عنصر
بعد تعريف الخطوط، يمكنك استخدامها بسهولة في أي عنصر:
h1 {
font-family: 'MyCustomFont';
}
مراجعة الدروس السابقة
من المهم مراجعة الدروس السابقة المتعلقة بخطوط الويب وأفضل الممارسات لضمان استخدام فعّال وسلس. يمكن أن يساعدك ذلك على فهم كيفية اختيار وتطبيق الخطوط بشكل صحيح في تصميمك.
فوائد هذا الدرس:
- تعلم كيفية استخدام الخطوط من الملفات المحلية في تصميم مواقع الويب.
- اكتساب مهارات البحث لحل المشكلات المتعلقة بالخطوط والتصميم.
- احصل على شهادة معتمدة بعد إكمال الدورة، مما يعزز فرصك في سوق العمل كمطور ويب.
انضم الآن واحصل على شهادتك!
ابدأ الآن في تعلم كيفية استخدام الخطوط بشكل صحيح في تصميم مواقع الويب. انضم إلى دورتنا لتطوير الويب واحصل على شهادة معتمدة تساعدك في بناء مواقع ويب احترافية.
الفيديوهات
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و الفيديوهات
فيديو الدرس التعليمي استخدام الخطوط من ملفات محلية في المواقع وحل المشكلات عبر البحث
المصادر
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و المصادر
محتوى صفحة إنترنت لتعلم تنسيق الألوان والخطوط وخصائص النصوص
أوامر تنسيق الألوان والخطوط وخصائص النصوص
ملحقات ال PDF
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و ملحقات ال PDF
شرح مرجعي للألوان والخطوط في تنسيق صفحات ومواقع الإنترنت
الدروس والاختبارات لتعلم هذه الدورة التدريبية : دورة تدريبية لغة CSS لإنشاء تصاميم وتنسيق صفحات الإنترنت