نص وخطوط CSS
المحتوى الرئيسي لصفحات الويب هو النص. CSS يوفر خصائص غنية للتحكم في خط النص وحجمه ولونه ومسافاته ومحاذاه.
خصائص الخط
مرجع سريع لخصائص الخط
| الخاصية | القيم الشائعة | الغرض |
|---|---|---|
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 |
اختصار لخصائص متعددة |
أفضل ممارسات مجموعة الخطوط
✅ ترتيب مجموعة الخطوط:
font-family يجب أن يذهب من الأكثر تحديداً إلى الأكثر عمومية، مثلاً: font-family: "PingFang SC", "Microsoft YaHei", sans-serif;. المتصفحات تحاول التحميل من اليسار إلى اليمين حتى تجد خطاً متاحاً.
مثال
HTML
<style>
p {
font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}
</style>
<p>هذا مثال على فقرة.</p>
خصائص النص
مرجع سريع لخصائص النص
| الخاصية | القيم الشائعة | الغرض |
|---|---|---|
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) |
محاذاة النص
مثال
HTML
<style>
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.justify { text-align: justify; }
</style>
<div class="left">محاذاة لليسار (افتراضي)</div>
<div class="center">محاذاة للوسط</div>
<div class="right">محاذاة لليمين</div>
<div class="justify">نص justified، يضبط مسافة الكلمات تلقائياً</div>
تزيين النص
مثال
HTML
<style>
.underline { text-decoration: underline; }
.overline { text-decoration: overline; }
.line-through { text-decoration: line-through; }
.none { text-decoration: none; }
</style>
<div class="underline">نص تحته خط</div>
<div class="overline">نص فوقه خط</div>
<div class="line-through">نص يتوسطه خط</div>
<div class="none">بدون تزيين (يزيل الخط السفلي الافتراضي للرابط)</div>
ظل النص
⚠️ تذكير بقابلية القراءة: بينما تبدو ظلال النص جيدة، الإفراط في استخدامها يُقلل من قابلية القراءة. خلفية داكنة مع ظل داكن غير مقروء — تأكد من تباين كافٍ بين النص والخلفية.
مثال
HTML
<style>
h1 {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
</style>
<h1>عنوان مع ظل</h1>
فيضان النص
مُدمج مع overflow وwhite-space لمعالجة فيضان النص:
مثال
HTML
<style>
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
border: 1px solid #ccc;
padding: 8px;
}
</style>
<div class="ellipsis">هذا نص طويل سيتم حذفه بعلامة القطع</div>
❓ أسئلة شائعة
س كيف أعيّن مجموعة خطوط لغات مختلفة؟
ج للعربية: `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لإضافة تأثير توهج لعنوان.