fonts في لغة css

السلام عليكم في هذا الدرس سنتعرف على كل ما يخص الخطوط معنا أنواعها وغيرها من المواضيع الشيقة إذا فلنبدأ على بركة الله بتعريف الخطوط.

تُستخدم الخطوط Fonts في تصميم الويب والطباعة والعروض التقديمية والعديد من التطبيقات الأخرى التي تتطلب النص. تشمل الخطوط على مجموعة من الملفات التي تحتوي على الأحرف والرموز والرموز الأخرى التي يتم استخدامها لعرض النص.

أنواع الخطوط: هناك عدة أنواع من الخطوط، منها:

1) الخطوط الثابتة Serif: تحتوي على أقدام صغيرة في نهاية الحروف، مما يعطيها مظهرًا أكثر تقليديًا. ومن الأمثلة على هذا النوع من الخطوط هي Times New Roman و Georgia.

2) الخطوط العصرية Sans-serif: تتميز بعدم وجود الأقدام الصغيرة في نهاية الحروف، مما يعطيها مظهرًا أكثر حداثة. ومن الأمثلة على هذا النوع من الخطوط هي Arial و Helvetica.

3) الخطوط المزخرفة Script: تتميز بالخطوط المنحنية والمعقدة، مما يعطيها مظهرًا جماليًا وأنثويًا. ومن الأمثلة على هذا النوع من الخطوط هي Brush Script و Lucida Handwriting.

4) الخطوط الديناميكية Display: تتميز بالخطوط الكبيرة والجريئة، وهي تستخدم بشكل رئيسي في العناوين والشعارات. ومن الأمثلة على هذا النوع من الخطوط هي Impact و Cooper Black.

كيفية إضافة الخطوط في CSS: توفر لنا لغة CSS طريقة سهلة لإضافة الخطوط إلى الموقع الخاص بنا. يمكن القيام بذلك عن طريق إضافة تعليمات خاصة بالخطوط في صفحة CSS. ولإضافة خط جديد إلى صفحة الويب، يتم اتباع الخطوات التالية:

CSS

p {
    font-family: Arial, sans-serif;
}

1) تحديد الخط المطلوب: يمكن اختيار الخط المراد استخدامه من بين العديد من الخطوط المتاحة. يمكن استخدام خط مضمن (embedded) في الصفحة أو استخدام خط يتم استضافته على خادم (hosted).

2) إضافة رمز الخط في صفحة الويب: يتم إضافة رمز الخط المناسب في صفحة الويب عن طريق إضافة العنصر @font-face في صفحة CSS.

3) تحديد الخصائص الخاصة بالخط: يمكن تحديد خصائص الخط مثل الحجم والنمط والوزن واللون.

4) استخدام الخط في الصفحة: يمكن استخدام الخط في النصوص المختلفة في صفحة الويب عن طريق تحديد اسم الخط في خصائص CSS.

كيفية تعامل المتصفح مع الخطوط: يتعامل المتصفح مع الخطوط من خلال تحميلها من الخادم الذي يتم استضافة الخط عليه، أو من خلال استخدام الخط المضمن في صفحة الويب. وتتوفر للمتصفح خيارات لتخزين الخطوط في الذاكرة المؤقتة (cache) لجعل عملية تحميل الخطوط أسرع في الزيارات اللاحقة للموقع.

بعض المواقع التي توفر الخطوط: هناك العديد من المواقع التي توفر مجموعة كبيرة من الخطوط الجاهزة للاستخدام، ومن بين هذه المواقع:

1) Google Fonts: توفر Google مجموعة كبيرة من الخطوط المجانية التي يمكن استخدامها في المواقع.

2) Adobe Fonts: يتوفر على هذا الموقع مجموعة كبيرة من الخطوط الجاهزة التي يمكن استخدامها في المواقع.

3) Font Squirrel: يوفر هذا الموقع مجموعة كبيرة من الخطوط المجانية والمدفوعة التي يمكن استخدامها في المواقع.

4) DaFont: يوفر هذا الموقع مجموعة كبيرة من الخطوط المجانية التي يمكن تنزيلها واستخدامها في المواقع.

5) Fonts.com: يوفر هذا الموقع مجموعة كبيرة من الخطوط المدفوعة والمجانية التي يمكن استخدامها في المواقع.

6) FontSpace: يوفر هذا الموقع مجموعة كبيرة من الخطوط المجانية التي يمكن تنزيلها واستخدامها في المواقع.

7) MyFonts: يتوفر على هذا الموقع مجموعة كبيرة من الخطوط المدفوعة والمجانية التي يمكن استخدامها في المواقع.

8) Fontspring: يوفر هذا الموقع مجموعة كبيرة من الخطوط المدفوعة والمجانية التي يمكن استخدامها في المواقع.

في النهاية، يجب على المصممين الإنتباه إلى أن استخدام الخطوط المتاحة في المواقع يجب أن يكون بحذر، حيث يمكن أن يؤثر استخدام خطوط كثيرة على سرعة تحميل الموقع، كما يجب أيضًا عدم الاعتماد على الخطوط المضمنة في الصفحة فقط، بل ينبغي استخدام الخطوط التي تتوفر على خوادم لتحسين سرعة تحميل الموقع.

وهكذا إنتهينا من درسنا أو مقالتنا المتواضعة أتمنى أنك فهمت و وفقك الله أتمنى دعمنا بمشاركة الدرس لكي تعم الفائدة.