فهم خاصية font-family في CSS: دليلك لاختيار الخطوط في صفحات الويب - العدد #33

ما هي خاصية font-family؟

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

أهمية ترتيب الخطوط

عند كتابة عدة أسماء خطوط في font-family، فإن الترتيب مهم جدًا. المتصفح سيحاول تحميل الخط الأول، وإذا لم يجده على جهاز المستخدم، ينتقل إلى الذي يليه. لذلك يُنصح دائمًا بكتابة أكثر من خيار، ثم إنهاء القائمة بفئة عامة لضمان عرض النص بشكل جيد.

مثال:

الخطوط الآمنة (Web Safe Fonts)

الخطوط الآمنة للويب هي خطوط شائعة ومثبتة على معظم أنظمة التشغيل، مثل Arial وTimes New Roman. استخدام هذه الخطوط يضمن أن تظهر النصوص بشكل موحد تقريبًا لجميع المستخدمين، دون الحاجة لتحميل خطوط خارجية.

خاصية موروثة (Inherited)

من خصائص font-family أنها موروثة، أي أن العناصر داخل عنصر معين (مثل فقرة داخل div) سترث الخط المحدد تلقائيًا، ما لم يتم تغييره صراحة.

كيف تعرف الخط الذي تم تطبيقه فعليًا؟

يمكنك استخدام أدوات المطور (DevTools) في المتصفح لفحص أي عنصر ومعرفة الخط الذي تم تطبيقه فعليًا، خاصة إذا لم يكن الخط الأول متاحًا.

أنواع الخطوط (Typeface Categories)

تنقسم الخطوط في CSS إلى عدة فئات رئيسية، لكل منها استخداماتها وخصائصها:

1. Serif\ خطوط ذات نهايات مزخرفة (مثل Times New Roman)، تُستخدم غالبًا في النصوص المطبوعة.
2. Sans-serif\ خطوط بدون الزخارف (مثل Arial)، وتُعد أكثر وضوحًا على الشاشات الرقمية.
3. Monospace\ كل حرف يشغل نفس العرض، وتُستخدم عادة في عرض الشيفرات البرمجية.
4. Display\ خطوط مخصصة للعناوين الكبيرة، وغالبًا ما تكون مزخرفة أو فنية، لكنها غير مناسبة للنصوص الطويلة.
5. Handwriting (Script أو Cursive)\ تحاكي خط اليد، وتُستخدم لإضفاء طابع شخصي أو فني، لكنها ليست مناسبة للقراءة الطويلة.

خلاصة

خاصية font-family تمنحك تحكمًا كبيرًا في مظهر النصوص، وتساعدك على تحسين تجربة المستخدم من خلال اختيار الخط المناسب. ومع توفر الخطوط الآمنة، وأدوات التحقق، وفئات الخطوط المتنوعة، يمكنك تصميم واجهات جذابة ومتناسقة بسهولة.