موضوع المقالة: مميزات النص وأنواع الخط في CSS

مقدمة

في عالم تصميم واجهة المستخدم، يعتبر تصميم النصوص من العناصر الرئيسية التي تحدد الشكل العام للموقع أو التطبيق. إن CSS، أو ورقات التنسيق المتتالية، هي لغة تصميم تستخدم لوصف شكل مستند كتب بلغة HTML. في هذا الدليل، سنناقش العديد من الخصائص التي تقدمها CSS لتحسين مظهر النصوص والخطوط.

خاصية لون النص في CSS

يتم تحديد لون النص في CSS باستخدام الخاصية “color”. هذه الخاصية تقبل القيم بعدة تنسيقات مثل الأسماء المحددة مسبقا مثل “red”، والقيم العددية مثل “rgb(255,0,0)” أو القيم السداسية عشرية مثل “#ff0000”.

مثال:

p {
  color: red;
}

في الكود أعلاه، تم تعيين لون النص في الفقرات إلى الأحمر. يمكن تغيير اللون وفقًا لمتطلبات التصميم.

خاصية توجيه النص في CSS

تُستخدم خاصية “text-align” في CSS لتوجيه النص في العنصر. يمكن أن تأخذ هذه الخاصية القيم: “left”، “right”، “center”، أو “justify”.

مثال:

p {
  text-align: right;
}

في هذا الكود، يتم توجيه النص في الفقرات إلى اليمين. يمكن تعديل التوجيه وفقًا لمتطلبات التصميم.

خاصية زخرفة النص في CSS

تُستخدم خاصية “text-decoration” في CSS لإضافة تأثيرات زخرفية للنص، مثل التسطير والخط المائل والخط العلوي. تقبل هذه الخاصية القيم: “none”، “underline”، “overline”، و “line-through”.

مثال:

p {
  text-decoration: underline;
}

في الكود أعلاه، تم تعيين الفقرات لتكون مسطرة. يمكن تغيير الزخرفة وفقًا لاحتياجات التصميم.

خاصية تحويل النص في CSS

تُستخدم خاصية “text-transform” في CSS لتغيير حالة الأحرف في النص. تقبل هذه الخاصية القيم: “uppercase”، “lowercase”، و “capitalize”.

مثال:

p {
  text-transform: uppercase;
}

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

خاصية ظل النص في CSS

تُستخدم خاصية “text-shadow” في CSS لإضافة ظل إلى النص. تأخذ هذه الخاصية ما يصل إلى أربع قيم: الأولى والثانية تحدد موقع الظل، الثالثة تحدد مدى طمس الظل، والرابعة تحدد لون الظل.

مثال:

p {
  text-shadow: 2px 2px 2px grey;
}

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

خصائص تباعد النص في CSS

توجد عدة خصائص في CSS تتيح التحكم في تباعد النص، منها “line-height” (لتحديد مسافة السطر)، “letter-spacing” (لتحديد مسافة بين الأحرف)، و “word-spacing” (لتحديد مسافة بين الكلمات).

مثال:

p {
  line-height: 1.6;
  letter-spacing: 2px;
  word-spacing: 1em;
}

في الكود أعلاه، تم تحديد مسافة السطر، مسافة الأحرف، ومسافة الكلمات في الفقرات. يمكن تعديل هذه الخصائص وفقًا لاحتياجات التصميم.

خاصية “font-family” في CSS

تُستخدم خاصية “font-family” في CSS لتحديد نوع الخط المستخدم في العنصر. يمكن أن تأخذ هذه الخاصية قائمة من أنواع الخطوط، يتم استخدام الأول الذي متوفر في نظام المستخدم.

مثال:

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

في الكود أعلاه، تم تحديد الخط “Arial” للفقرات. إذا لم يتوفر الخط “Arial” في نظام المستخدم، سيتم استخدام أي خط من فئة “sans-serif”. يمكن تغيير نوع الخط وفقًا لاحتياجات التصميم.

الخطوط الآمنة للويب في CSS

تُعرف الخطوط الآمنة للويب بأنها الخطوط التي يُمكن توقع وجودها في معظم أنظمة التشغيل، مما يجعلها خيارًا آمنًا عند تحديد خصائص الخط في CSS. تشمل هذه الخطوط “Arial”، “Times New Roman”، “Courier New”، و “Verdana”.

مثال:

p {
  font-family: Arial, "Times New Roman", "Courier New", Verdana, sans-serif;
}

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

خاصية “font-style” في CSS

تُستخدم خاصية “font-style” في CSS لتحديد إذا كان الخط مائلاً (“italic”) أو طبيعياً (“normal”).

مثال:

p {
  font-style: italic;
}

في الكود أعلاه، تم تحديد الخط في الفقرات ليكون مائلاً. يمكن تغيير هذه الخاصية وفقًا لاحتياجات التصميم.

خاصية “font-weight” في CSS

تُستخدم خاصية “font-weight” لتحديد سماكة الخط في التصميم. يمكن أن تحتوي هذه الخاصية على قيم مثل “normal” (وزن الخط العادي)، “bold” (وزن الخط الغامق)، أو يمكن تحديدها بقيمة رقمية بين 100 و900.

مثال:

h1 {
  font-weight: bold;
}

في الكود أعلاه، تم تحديد سماكة الخط في العنوان h1 كغامق (bold).

خاصية “font-size” في CSS

خاصية “font-size” في CSS تُستخدم لتحديد حجم الخط. يمكن أن تحتوي هذه الخاصية على قيم مختلفة مثل بكسل (px)، نسبة مئوية (%), والنقاط (pt)، والريم (rem)، والام (em).

مثال:

p {
  font-size: 16px;
}

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

خاصية الخط المختصرة في CSS

خاصية الخط المختصرة “font” في CSS تسمح بتحديد خصائص الخط المتعددة مثل “font-style”، “font-variant”، “font-weight”، “font-size”، “line-height”، و “font-family” في سطر واحد من الكود. يجب أن تكون هذه القيم في ترتيب معين.

مثال:

p {
  font: italic bold 16px/1.5 Arial, sans-serif;
}

في الكود أعلاه، تم تحديد الخط في الفقرات ليكون مائلاً، غامق، بحجم 16 بكسل، وبارتفاع سطر 1.5. الخط الأساسي هو Arial، وفي حالة عدم توفره، سيتم استخدام أي خط بدون زخارف (sans-serif) متاح.

خطوط Google في CSS

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

مثال:

<head>
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
  <p style="font-family: 'Roboto', sans-serif;">هذه فقرة بخط Roboto من خطوط Google.</p>
</body>

في الكود أعلاه، تم تضمين خط Roboto من خطوط Google في الصفحة. يمكن تحديد هذا الخط كخط للنص باستخدام “font-family” في CSS.

الخاتمة

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

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

الأسئلة الشائعة