مجموعات الخطوط العامة في CSS

click fraud protection

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

مجموعات الخطوط

عندما انت حدد الخط لاستخدامها على صفحة ويب ، من أفضل الممارسات تضمين الخيارات الاحتياطية في حالة تعذر العثور على اختيار الخط الخاص بك. يتم عرض هذه الخيارات الاحتياطية في ملف مكدس الخط. إذا لم يتمكن المستعرض من العثور على الخط الأول المدرج في الحزمة ، فإنه ينتقل إلى الخط التالي. يستمر في هذه العملية حتى يجد خطًا يمكنه استخدامه ، أو ينفد من الخيارات (في هذه الحالة ، يختار فقط أي خط نظام يريده). فيما يلي مثال لكيفية ظهور مجموعة الخطوط في CSS عند تطبيقها على عنصر "body":

الجسم {
عائلة الخطوط: Georgia، "Times New Roman"، serif؛
}

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

instagram viewer

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

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

مجموعات الخطوط العامة

اسم الخط العام المتاح في CSS هو:

  • مخطوطة
  • خيال
  • أحادي الفضاء
  • الرقيق
  • بلا الرقيق

في حين أن هناك العديد من تصنيفات الخطوط الأخرى المتاحة في تصميم الويب والطباعة ، بما في ذلك slab-serif ، الحروف السوداء ، والعرض ، والغرونج ، وأكثر من ذلك ، هذه الأسماء الخمسة للخطوط العامة هي الأسماء التي ستستخدمها في مجموعة خطوط في CSS.

  • خطوط مخطوطة - غالبًا ما تتميز بأشكال حروف رفيعة ومزخرفة تهدف إلى تكرار نص مكتوب بخط اليد. هذه الخطوط ، بسبب أحرفها الرفيعة والمنمقة ، ليست مناسبة لكتلة كبيرة من المحتوى مثل نسخة الجسم. تُستخدم الخطوط المخطوطة عمومًا للعناوين واحتياجات النص الأقصر التي يمكن عرضها بأحجام خطوط أكبر.
  • خطوط الخيال - هي الخطوط المجنونة إلى حد ما والتي لا تندرج حقًا في أي فئة أخرى. الخطوط التي تنسخ الشعارات المعروفة ، مثل أشكال الحروف من هاري بوتر أو العودة إلى المستقبل الأفلام ، تندرج في هذه الفئة. هذه الخطوط غير مناسبة لمحتوى الجسم نظرًا لأنها غالبًا ما تكون منمقة لدرجة أن قراءة مقاطع نصية أطول مكتوبة بهذه الخطوط أمر صعب للغاية.
  • خطوط مونوسبيس - تتميز بأشكال حروف متساوية الحجم ومتباعدة كما لو كنت تجدها في آلة كاتبة قديمة. على عكس الخطوط الأخرى التي لها عروض متغيرة للأحرف اعتمادًا على حجمها (على سبيل المثال ، الأحرف الكبيرة دبليو تشغل مساحة أكبر بكثير من الأحرف الصغيرة أنا) ، تستخدم خطوط monospace عرضًا ثابتًا لجميع الأحرف. غالبًا ما تُستخدم هذه الخطوط لقراءات التعليمات البرمجية لأنها تبدو مختلفة بشكل واضح عن النصوص الأخرى في تلك الصفحة.
  • خطوط Serif - استخدم القليل من الأحرف الإضافية على أشكال الحروف. هذه القطع الإضافية تسمى الرقيق. خطوط serif الشائعة هي Georgia و Times New Roman. تعمل خطوط Serif بشكل رائع مع النصوص الكبيرة مثل العنوان وكذلك المقاطع الطويلة من النص والنسخة الأساسية.
  • بلا الرقيقالخطوط - لا تحتوي على أربطة. الاسم يعني بدون الرقيق. تتضمن الخطوط الشائعة في هذه الفئة Arial أو Helvetica. على غرار serifs ، تؤدي خطوط sans-serif أداءً جيدًا في العناوين بالإضافة إلى محتوى الجسم ، على الرغم من وجود بعض الخطوط يفضل الخبراء أن تتجنب الكتل الكبيرة من النص خطوط sans-serif لأن قراءتها أصعب عند نقطة صغيرة الأحجام.
instagram story viewer