أفضل طريقة لاستخدام الخطوط في CSS؟

ستقدم لك هذه المقالة موضوعًا بسيطًا ولكنه مهم وهو Fonts In وسيمنحك أيضًا عرضًا عمليًا حول هذا الموضوع. سيتم تغطية المؤشرات التالية في هذه المقالة ،

• الخطوط في CSS
• السمات في CSS Font
• سمة نمط الخط
• سمة وزن الخط
• سمة حجم الخط
• سمة عائلة الخط

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

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

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

للحصول على برنامج تعليمي شامل لـ CSS ، قم بزيارة Edureka CSS Tutorial for Beginners. سوف تحصل على معلومات ممتازة عن طريقة استخدام CSS لزيادة تصميم الويب بتنسيق HTML.

المضي قدما في هذه المقالة على الخطوط في CSS

الخطوط في CSS

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

مثال 1: عناوين وفقرات بخطوط مختلفة

body {background-color: lightblue} h1 {font: bold 30px arial، sans-serif} h2 {font: 15px verdana} p {font: italic bold 12px / 30px Georgia، serif}
الفقرة بخط جورجيا المائل الغامق
 

 مثال 1: الإخراج 

في المثال 1 ، لدينا 3 أسطر نصية مختلفة بخطوط مختلفة. ستلاحظ أن كل خط من الخطوط يختلف في عرض الأحرف والمسافات البادئة وما إلى ذلك.

المضي قدما في هذه المقالة على الخطوط في CSS

السمات في CSS Font

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

في المثال 1 ، استخدمنا أسماء خطوط مختلفة للعناوين والفقرة. تحت علامتي h1 و p ، نرى اسمين للخط مدرجين ، بينما لا تسمي علامة h2 سوى خط واحد. هذا هو تعريف عائلة الخطوط ، المزيد حول هذا لاحقًا.

المضي قدما في هذه المقالة على الخطوط في CSS

سمة نمط الخط:

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

المضي قدما في هذه المقالة على الخطوط في CSS

سمة وزن الخط:

تحدد هذه السمة ما إذا كان يجب أن يظهر الخط سميكًا أم رفيعًا. يمكن ضبطه على 'عادي' أو 'جريء'. القيمة الافتراضية طبيعية. يمكن أيضًا تعيين هذه القيمة كرقمية. الوزن 400 يمثل الطبيعي و 700 للخط العريض. هناك عدد قليل من الإعدادات الأخرى (تتراوح من 100 - خفيف جدًا إلى 900 - غامق جدًا) ، لكنها غير مدعومة من قبل جميع الخطوط. جميع خيارات الوزن موضحة في المثال 3.

المضي قدما في هذه المقالة على الخطوط في CSS

سمة حجم الخط:

يمكن تعيين سمة الحجم بعدة طرق. دعونا نسرد هذه الطرق أدناه.
● تعداد القيمة مثل 'متوسط' ، 'كبير'. في الواقع ، تمامًا مثل مقاسات الملابس ، يمكن أن تتراوح القيم من XX صغير إلى XX كبير!
● تعيين نسبة إلى العنصر الأصلي ، 'أكبر' أو 'أصغر'.
● النسبة المئوية لحجم العنصر الأصلي.
● قم بتعيين 'وراثة' لتبني حجم العنصر الرئيسي مباشرةً.
● كقيمة مطلقة بوحدات بكسل (بكسل) أو نقطة (نقاط) أو سم (سم)
'الوسيط' هي القيمة الافتراضية التي تم تعيينها لهذه المعلمة.

المضي قدما في هذه المقالة على الخطوط في CSS

سمة عائلة الخط:

في HTML ، تستخدم عائلة خطوط CSS لتعيين اسم الخط. يمكنك إما وضع اسم خط واحد مع العلامة. أو يمكنك تعيين قيم متعددة كقائمة عائلة خطوط تحدد الأولوية التي يجب أن يختار فيها المتصفح الخط.
يتم ترتيب القائمة من اليسار إلى اليمين ، في شكل نظام رجعي. تم اختيار القيمة الأولى إذا كانت متوفرة ، أو ينتقل عنصر التحكم إلى القيمة التالية ، حتى يتم الوصول إلى نهاية القائمة. يتم تحديد عائلة الخطوط الافتراضية من خلال تفضيلات المتصفح.
تتكون عائلات خطوط CSS من نوعين - العائلات العامة وعائلات الخطوط.
● العائلات العامة - استنادًا إلى بعض الخصائص العامة ، يتم تجميع الخطوط على أنها 'serif' و 'sans serif' و 'monospace' وما إلى ذلك. على سبيل المثال ، تعني Sans serif الخطوط بدون نمط serif.
● أسماء العائلة - الخطوط التي تنتمي إلى تسلسلات هرمية عائلية محددة. Times و Arial و Courier كلها عائلات خطوط و Times New Roman هو مثال على خط عائلة Times.
تم سرد خيارات استخدام مجموعة الخطوط المختلفة في المثال 4 أدناه.

بعض النقاط المشتركة التي يجب ملاحظتها

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

آمل أن تكون قد عثرت على المعلومات التي كنت تبحث عنها في Fonts In CSS. شارك تجربتك معنا في قسم التعليقات أدناه. تصميم سعيد!

إذا كنت مهتمًا بمعرفة المزيد حول تطوير الويب ، فاطلع على بواسطة Edureka. سيساعدك تدريب شهادة تطوير الويب على تعلم كيفية إنشاء مواقع ويب رائعة باستخدام HTML5 و CSS3 و Twitter Bootstrap 3 و jQuery و Google APIs ونشرها في Amazon Simple Storage Service (S3).