CSS: نص وخطوط CSS

آخر تحديث: 2026-10-13

المحتوى الرئيسي لصفحات الويب هو النص. CSS يوفر خصائص غنية للتحكم في خط النص وحجمه ولونه ومسافاته ومحاذاه.

خصائص هذا القسم: font-family font-size font-weight font-style line-height font color text-align left right text-decoration text-indent letter-spacing word-spacing text-transform text-shadow text-overflow overflow white-space width max-width

1. خصائص الخط

(1) مرجع سريع لخصائص الخط

الخاصية	القيم الشائعة	الغرض
`font-family`	`"Microsoft YaHei"`، `Arial`، `sans-serif`	تعيين خط (بدائل متعددة)
`font-size`	`16px`، `1.2em`، `1rem`، `100%`	حجم الخط
`font-weight`	`normal`(400)، `bold`(700)، `100`~`900`	وزن الخط
`font-style`	`normal`، `italic`، `oblique`	نمط الخط (مائل/عادي)
`line-height`	`1.5`(بدون وحدة)، `24px`، `150%`	ارتفاع السطر (يُوصى بـ 1.5-1.8)
`font`	`italic bold 16px/1.8 sans-serif`	اختصار لخصائص متعددة

(2) أفضل ممارسات مجموعة الخطوط

✅ ترتيب مجموعة الخطوط: font-family يجب أن يذهب من الأكثر تحديداً إلى الأكثر عمومية، مثلاً: font-family: "PingFang SC", "Microsoft YaHei", sans-serif;. المتصفحات تحاول التحميل من اليسار إلى اليمين حتى تجد خطاً متاحاً.

▶ مثال

▶ جرّب الكود

2. خصائص النص

(1) مرجع سريع لخصائص النص

الخاصية	القيم الشائعة	الغرض
`color`	`#333`، `red`، `rgb(0,0,0)`	لون النص
`text-align`	`left`، `center`، `right`، `justify`	محاذاة أفقية
`text-decoration`	`none`، `underline`، `overline`، `line-through`	تزيين النص
`text-indent`	`2em`، `20px`	مسافة بادئة للسطر الأول
`letter-spacing`	`2px`، `-1px`	مسافة بين الأحرف
`word-spacing`	`5px`	مسافة بين الكلمات
`text-transform`	`uppercase`، `lowercase`، `capitalize`	تحويل النص
`text-shadow`	`2px 2px 4px rgba(0,0,0,0.5)`	ظل النص
`text-overflow`	`clip`، `ellipsis`	معالجة الفيضان (يحتاج `overflow: hidden`)

(2) محاذاة النص

▶ مثال

▶ جرّب الكود

(3) تزيين النص

▶ مثال

▶ جرّب الكود

(4) ظل النص

⚠️ تذكير بقابلية القراءة: بينما تبدو ظلال النص جيدة، الإفراط في استخدامها يُقلل من قابلية القراءة. خلفية داكنة مع ظل داكن غير مقروء — تأكد من تباين كافٍ بين النص والخلفية.

▶ مثال

▶ جرّب الكود

(5) فيضان النص

مُدمج مع overflow وwhite-space لمعالجة فيضان النص:

▶ مثال

▶ جرّب الكود

❓ أسئلة شائعة

س كيف أعيّن مجموعة خطوط لغات مختلفة؟

ج للعربية: font-family: "Segoe UI", Tahoma, Arial, sans-serif;. Windows يستخدم Segoe UI أو Tahoma، Mac يستخدم Arial، والبديل هو sans-serif النظامي.

س هل تحميل Google Fonts يؤثر على السرعة؟

ج نعم. Google Fonts يتطلب طلبات شبكة إضافية. حمّل فقط الأوزان المطلوبة (لا تحمّل جميع 300/400/500/700 دفعة واحدة)، وأضف معلمة display=swap حتى تستخدم المتصفحات الخط البديل أولاً، ثم تُستبدل عند تحميل الخط المخصص.

س لماذا لا يعمل text-overflow: ellipsis أحياناً؟

ج علامة القطع تحتاج ثلاثة شروط في وقت واحد: white-space: nowrap (لا كسور أسطر)، overflow: hidden (إخفاء الفيضان)، وwidth أو max-width (عرض محدود). غياب أي منها يمنعها من العمل.

📖 ملخص

النص هو المحتوى الرئيسي لصفحات الويب؛ خصائص خط ونص CSS تتيح لك التحكم الدقيق في مظهر كل حرف
من اختيار الخط وحجمه إلى ارتفاع السطر والمحاذاة والمسافة البادئة والظل — الجمع الصحيح بين هذه الخصائص يُحسّن بشكل كبير تجربة القراءة
تذكر: ارتفاع سطر النص الأساسي 1.5-1.8، مسافة بادئة للسطر الأول text-indent: 2em، فيضان نص text-overflow: ellipsis

📝 تمارين

أنشئ صفحة قراءة مقال بعنوان وعنوان فرعي وفقرات أساسية. استخدم خطوطاً وأحجاماً وألواناً مختلفة لتمييز التسلسل الهرمي.
وضح 4 تأثيرات text-decoration على الأقل (تحته خط، فوقه خط، يتوسطه خط، متموج).
نفّذ "فيضان سطر واحد بعلامة القطع" — أظهر نصاً طويلاً في حاوية بعرض ثابت مع ... للفيضان.
استخدم text-shadow لإضافة تأثير توهج لعنوان.

فريق Web-Tutorial التقني

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

من نحن