font-size

خاصية حجم الخط font-size

خاصية font-size تحدد حجم النص — وبوحدة rem تحترم إعدادات المستخدم، وبدالة clamp تتدرج مع الشاشة بلا قفزات.

معركة الوحدات محسومة: **rem** (نسبة لجذر الصفحة، 1rem = 16px افتراضيًا) هي الصواب لأنها تتضاعف مع تكبير المستخدم لخط متصفحه — وpx الثابتة تكسر هذه الوصولية. وem الشقيقة تنسب للأب فتتراكم بشكل مفاجئ داخل التداخل.

ونجمة العصر clamp(الأدنى, المتغير, الأقصى): عنوان يتدرج مع عرض الشاشة بين حدين بلا أي media query — clamp(1.8rem, 4vw, 3rem) عنوان هيرو كامل التجاوب بسطر.

الصياغة

html { font-size: 16px; }
p  { font-size: 1.0625rem; }
h1 { font-size: clamp(1.8rem, 4vw, 3rem); }

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<style>
  .fluid { font-size: clamp(18px, 6vw, 42px); color: #6d28d9; font-weight: bold; }
</style>
<p class="fluid">وسّع وضيّق المعاينة — أتدرج بنعومة بين حدّين</p>
<p style="font-size: 1rem">نص عادي 1rem — يحترم إعدادات القارئ.</p>

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
rem	نسبة لجذر الصفحة — وحدة النصوص الصحيحة وصوليًا
clamp(min, fluid, max)	تدرج سائل بين حدين — عناوين متجاوبة بلا media
em	نسبة للأب — تتراكم بالتداخل؛ جيدة لـ padding المرتبط بالخط
16px	أساس الجذر المعتاد — لا تنزل عنه لنص القراءة

💡 نصائح عملية

سلم أحجام محدود (كل عنصر من طبقة معروفة) أجمل من فوضى قيم عشوائية
العربية تحتاج نفَسًا أوسع قليلًا من اللاتينية — 17px+ لنص المقالات مريح

⚠️ أخطاء شائعة

px لكل النصوص فتتجاهل تكبير خط المستخدم — خصم وصولية مباشر
em متداخلة تتضاعف تراكميًا وتفاجئك بنص قزم أو عملاق

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار CSS الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs