منطقة إعلانية

يُمكننا وضع إعلانك هنا🧡ويُمكنك التواصل معنا عن طريق صفحةالفيس بوك

Web safe fonts

- شكل وطريقة عرض الخط (font) على الموقع يتم تحديدها بخاصية تُسميfont-familyوالتي تقوم بتحديد شكل النص الذي سوف يظهر في الموقع.
- وخاصية الfont-familyلها العديد من القيم مثل "Times New Roman" و "Comic Sans MS” و Arial وتجد العديد من القيمهنااوهنا


واهم حاجة في الموضوع ده بقا ان مش كل أنواع الخطوط شغالة على كل الأجهزة او كل المتصفحات بمعني إنك ممكن تختار نوع خط ويظهر علي جهازك ولكن لا يظهر على جهاز اخر
و الحل
1- نختار الخطوط التي تظهر تقريبا على جميع المتصفحات والأجهزة والتي تُسميWeb safe fontsوهتلاقيهم هنا
2نُضيف أكثر من نوع للخطوط وبالتالي قيمة الfont-familyستحتوي على أكثر من قيمة
مثال علي ذلك:font-family: "Times New Roman", Arial, serif;
وهنا المُتصفح سوف يعرض النصوص بخط "Times New Roman" وإذا كان المتصفح لا يدعم هذا الخط؛ فسيتم العرض بخط Arial وهكذا ......


إذا كان اسم الخط مكون من أكثر من كلمة مثلTimes New Romanفيجب ان نضعه بين علامات الاقتباس فيُصبح كالتالي"Times New Roman"

وبالتالي فان الخطوط الأمنه (Web safe fonts) تُعطي لك عدد محدود من الخطوط لكي تستخدمها ولكن اذا اردنا:

  1. استخدام عدد كبير جدا من الخطوط
  2. وهذه الخطوط تظهر على جميع الأجهزة فإننا نستخدم Google Fonts

أهم الأكواد الخاصة بتنسيق ال css fonts

1 font-family: ***;
وهناتجد بعض القيم الخاصة بهذا الكود
2 Font-style: ***;
وهناتجد جميع القيم الخاصة بهذا الكود
3 font-weight: ***;
وهناتجد جميع القيم الخاصة بهذا الكود

Google Fonts

Google Fonts هي عبارة عن مكتبة من الخطوط التي يمكنك الاختيار منها نوع الخط المناسب لك ويُمكنك ان تجد هذه المكتبة وجميع خطوطهامن هنا
طريقة إضافة خطوط Google Fonts سيتم شرحها بالتفصيل في الفيديو الخاص ب هذا الدرس

CSS Icons

عندما نريد إضافة icon في الموقع الخاص بنا فيوجد لدينا العديد من الاختيارات :
1استخدام الايقونات الموجودة في لغة ال html بشكل افتراضي والتي سوف تجدهاهناأوهنا
2- استخدام بعض المكتبات المشهورة بعمل ال icons مثلFont Awesome Iconsوأيضا مكتبة الBootstrap Icons

وسيتم شرح كيفية إضافة هذه المكتبات في الفيديو الخاص بهذا الدرس وشكراً🧡

Do not waste your time and start with us, now 😍